2.1 Методы доступа к элементам
Навигация по DOM (Document Object Model) является важной задачей при работе с веб-документами. JavaScript предоставляет множество методов для поиска и доступа к элементам документа. Эти методы позволяют разработчикам легко находить нужные элементы и манипулировать ими.
1. Метод getElementById()
Метод getElementById() возвращает элемент, который имеет атрибут id с указанным значением. Это один из самых простых и часто используемых методов.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Выведет: This is the content
</script>
</body>
</html>
2. Метод getElementsByClassName()
Метод getElementsByClassName() возвращает коллекцию всех элементов, которые имеют указанный класс. Коллекция является "живой", что означает, что она автоматически обновляется при изменении DOM.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Выведет: 3
</script>
</body>
</html>
3. Метод getElementsByTagName()
Метод getElementsByTagName() возвращает коллекцию всех элементов с указанным тегом. Эта коллекция также является "живой".
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Выведет: 3
</script>
</body>
</html>
4. Метод querySelector()
Метод querySelector() возвращает первый элемент, который соответствует указанному CSS селектору. Это очень мощный и гибкий метод для поиска элементов.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Выведет: Paragraph 2
</script>
</body>
</html>
5. Метод querySelectorAll()
Метод querySelectorAll() возвращает статическую (не изменяющуюся) коллекцию всех элементов, которые соответствуют указанному CSS селектору.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Выведет: 3
</script>
</body>
</html>
2.2 Навигация по узлам
DOM также предоставляет методы для навигации по узлам относительно текущего элемента.
1. Свойство parentNode
Свойство parentNode возвращает родительский узел текущего узла.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Выведет: container
</script>
</body>
</html>
2. Свойство childNodes
Свойство childNodes возвращает коллекцию всех дочерних узлов текущего узла, включая текстовые узлы.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Выведет количество всех дочерних узлов, включая текстовые
</script>
</body>
</html>
Возможно, вы всё ещё задаётесь вопросом, почему результат равен 7?
Как уже было сказано выше, свойство childNodes возвращает коллекцию всех дочерних узлов текущего узла, включая текстовые узлы (пробелы, символы, новые строки и т. д.). HTML-разметка содержит пробелы и новые строки между элементами <li>, которые также считаются отдельными узлами.
В примере выше между тегом <ul> и первым <li> есть новая строка (и, возможно, пробел) — это считается текстовым узлом. Та же ситуация между всеми <li> и после последнего <li>. Поэтому, вместо трёх элементов списка, childNodes включает эти текстовые узлы, что приводит к общему количеству — 7.
Чтобы получить только элементы (игнорируя текстовые узлы), можно использовать свойство children, возвращающее только дочерние элементы:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Свойства firstChild и lastChild
Свойства firstChild и lastChild возвращают первый и последний дочерний узел соответственно.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Вас может удивить, что в консоль ничего не вывелось. Однако это не так. Вывелись последний дочерний узел Item 1 и Item 3 (новая строка). Если вы попались на этом моменте, вам следует еще разок перечитать п.2 Свойство childNodes
4. Свойства nextSibling и previousSibling
Свойства nextSibling и previousSibling возвращают следующий и предыдущий узлы на том же уровне иерархии.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Выведет: Item 3
console.log(prev.textContent); // Выведет: Item 1 (если пропустить текстовые узлы)
</script>
</body>
</html>
2.3 Навигация по элементным узлам
5. Свойства nextElementSibling и previousElementSibling
Эти свойства возвращают следующий и предыдущий элементные узлы (пропуская текстовые и комментарии).
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Выведет: Item 3
console.log(prev.textContent); // Выведет: Item 1
</script>
</body>
</html>
6. Свойства firstElementChild и lastElementChild
Эти свойства возвращают первый и последний дочерние элементные узлы (пропуская текстовые и комментарии).
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Выведет: Item 1
console.log(last.textContent); // Выведет: Item 3
</script>
</body>
</html>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ