document.getElementById()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
index.html
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Работа с DOM</title>
</head>
<body>
<div id="app">Id APP</div>
<div class="class-name">Class Name</div>
<ul>
<li class="q">1</li>
<li class="q">2</li>
<li class="q">3</li>
<li class="q">4</li>
<li class="q">5</li>
</ul>
<div id="test">
<h1>Hello</h1>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
// Обратимся к div с id app
var id = document.getElementById('app');
// var className = document.getElementsByClassName('class-name');
var className = document.getElementsByClassName('class-name')[0]; // обратимся к 0 элементу массива
console.log(id);
console.log(className);
// getElementsByClassNam позволяет забирать несколько элементов
var q = document.getElementsByClassName('q');
console.log(q);
// Новые методы, например querySelector и querySelectorAll
// Эти методы удобны тем, что в них можно прописывать css-свойства
var app = document.querySelector('#app');
console.log(app);
var element = document.querySelector('.class-name');
console.log(element);
var elements = document.querySelectorAll('.q');
console.log(elements);
// Обратимся к заголовку h1 тега div с id=test
var test = document.querySelector('#test > h1');
console.log(test);
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
index.html
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Работа с DOM</title>
</head>
<body>
<div id="app">Id APP</div>
<div class="class-name">Class Name</div>
<ul>
<li class="q">1</li>
<li class="q">2</li>
<li class="q">3</li>
<li class="q">4</li>
<li class="q">5</li>
</ul>
<div id="test">
<h1>Hello</h1>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
// Обратимся к div с id app
var id = document.getElementById('app');
// var className = document.getElementsByClassName('class-name');
var className = document.getElementsByClassName('class-name')[0]; // обратимся к 0 элементу массива
console.log(id);
console.log(className);
// getElementsByClassNam позволяет забирать несколько элементов
var q = document.getElementsByClassName('q');
console.log(q);
// Новые методы, например querySelector и querySelectorAll
// Эти методы удобны тем, что в них можно прописывать css-свойства
var app = document.querySelector('#app');
console.log(app);
var element = document.querySelector('.class-name');
console.log(element);
var elements = document.querySelectorAll('.q');
console.log(elements);
// Обратимся к заголовку h1 тега div с id=test
var test = document.querySelector('#test > h1');
console.log(test);
Комментариев нет:
Отправить комментарий