Обхід DOM передбачає переміщення по структурі документа за допомогою JavaScript для доступу, зміни або взаємодії з різними вузлами. DOM організовано у вигляді дерева з вузлами, з'єднаними в ієрархії, що включає відносини батьківських, дочірніх та сусідніх вузлів:

• Батьківський вузол: Вузол, який містить інші вкладені вузли;
• Дочірні вузли: Вузли, що знаходяться безпосередньо всередині батьківського вузла;
• Сусідні вузли: Вузли, які мають одного батька та знаходяться на одному рівні.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

У цій структурі:

• <ul> є батьківським елементом для елементів <li>;
• Кожен <li> є дочірнім елементом <ul>;
• Два елементи <li> є сусідніми один до одного.

Навігація по DOM

JavaScript надає кілька властивостей для навігації цими відносинами, що дозволяє ефективно переміщатися між вузлами.

ParentNode

Властивість parentNode дозволяє отримати батьківський елемент поточного вузла. Корисно, коли потрібно піднятися вгору по дереву DOM.

У цьому прикладі parentNode отримує батьківський <ul> для вибраного <li> і додає рамку навколо всього списку.

ChildNodes

Властивість childNodes повертає колекцію всіх дочірніх вузлів заданого елемента, включаючи текстові вузли (пробіли між елементами).

У цьому прикладі вибирається список завдань і здійснюється обхід його дочірніх елементів, до кожного елемента <li> додається відступ.

FirstChild та LastChild

firstChild: Доступ до першої дочірньої ноди елемента, включаючи текстові вузли.
lastChild: Доступ до останньої дочірньої ноди елемента, включаючи текстові вузли.

Припустимо, потрібно виділити перший та останній елементи у кошику покупок.

У цьому прикладі виділяються перший та останній елементи списку, демонструючи, як отримати доступ до першого та останнього вузлів і змінити їх.

Оскільки firstChild та lastChild часто посилаються на текстові вузли (наприклад, пробіли), а не на самі елементи (<li>), кращим підходом є використання firstElementChild та lastElementChild, які безпосередньо звертаються до першого та останнього дочірнього елемента, ігноруючи текстові вузли.

PreviousSibling та NextSibling

nextSibling: Повертає наступний вузол-сусід поточного вузла.
previousSibling: Повертає попередній вузол-сусід поточного вузла.

Наприклад, навігація між завданнями у списку справ, позначення завдань як "наступне" або "виконано раніше".

У цьому випадку:

• nextSibling переходить до наступного завдання та позначає його як "наступне";
• previousSibling позначає попереднє завдання як виконане.

Однак, nextSibling та previousSibling часто вказують на текстові вузли (наприклад, пробіли). Щоб отримати саме елемент-вузол (<li>), слід використовувати nextElementSibling та previousElementSibling, які ігнорують текстові вузли.

Практичний приклад: Менеджер завдань

Уявімо, що ми створюємо менеджер завдань, де користувачі можуть додавати, виділяти та керувати завданнями. Необхідно динамічно оновлювати завдання, позначати перше завдання як "пріоритетне", наступне — як "майбутнє", а останнє — як "виконане". Цей приклад продемонструє навігацію по DOM за допомогою parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling та previousElementSibling.

Коли натискається кнопка "Виділити завдання", JavaScript застосовує різні стилі до завдань залежно від їхнього розташування. firstElementChild позначає перше завдання як "Пріоритетне" з жирним жовтим стилем. lastElementChild позначає останнє завдання як "Виконане" із зеленим кольором та перекресленням. nextElementSibling виділяє друге завдання як "Майбутнє" синім кольором, а якщо існує попередній сусідній елемент, він отримує синю рамку.