2.1 Методи доступу до елементів
Навігація по DOM (Document Object Model) є важливим завданням при роботі з веб-документами. JavaScript надає багато методів для пошуку та доступу до елементів документа. Ці методи дозволяють розробникам легко знаходити потрібні елементи та маніпулювати ними.
1. Метод getElementById()
Метод getElementById() повертає елемент, який має атрибут id із зазначеним значенням. Це один із найпростіших і найчастіше використовуваних методів.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Документ</title>
</head>
<body>
<div id="content">Це контент</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Виведе: Це контент
</script>
</body>
</html>
2. Метод getElementsByClassName()
Метод getElementsByClassName() повертає колекцію всіх елементів, які мають зазначений клас. Колекція є "живою", тобто вона автоматично оновлюється при зміні DOM.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Документ</title>
</head>
<body>
<p class="text">Параграф 1</p>
<p class="text">Параграф 2</p>
<p class="text">Параграф 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Виведе: 3
</script>
</body>
</html>
3. Метод getElementsByTagName()
Метод getElementsByTagName() повертає колекцію всіх елементів з зазначеним тегом. Ця колекція також є "живою".
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Документ</title>
</head>
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 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>Документ</title>
</head>
<body>
<div class="container">
<p>Параграф 1</p>
<p class="highlight">Параграф 2</p>
<p>Параграф 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Виведе: Параграф 2
</script>
</body>
</html>
5. Метод querySelectorAll()
Метод querySelectorAll() повертає статичну (незмінну) колекцію всіх елементів, які відповідають зазначеному CSS-селектору.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Документ</title>
</head>
<body>
<div class="container">
<p>Параграф 1</p>
<p class="highlight">Параграф 2</p>
<p>Параграф 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>Документ</title>
</head>
<body>
<div id="container">
<p>Параграф</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 Навігація по елементним вузлам
1. Властивості 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>
2. Властивості 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>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ