Перейти до основного вмісту

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

DOM надає широкий спектр можливостей для роботи з елементом і його вмістом, але для цього, спочатку потрібно отримати посилання на нього. Доступ до DOM починається з об'єкта document, з нього можна дістатися до будь-яких елементів.

Цікаво

document - це частина глобального об'єкта window, який доступний у скрипті, коли він виконується в браузері. Так само як alert, console.log, prompt і багато інших.

Елементи DOM-дерева мають ієрархічне відношення один до іншого. Для опису відносин використовуються терміни предок (ancestor), нащадок (descendant), батько (parent), дитина (child) і сусід (sibling).

  • Найвищий елемент називається кореневим (root node).
  • Кожен елемент, крім кореневого, має тільки одного батьківського.
  • У елемента може бути скільки завгодно дітей.
  • Сусіди - це елементи зі спільним батьківським елементом.
  • Дочірні елементи (діти) - елементи, які знаходяться безпосередньо всередині поточного (перша вкладеність).
  • Нащадки - усі елементи, які знаходяться у поточному, разом з їхніми дітьми, дітьми їхніх дітей тощо. Тобто все на зразок дерева.
DOM traversal

Для навігації по цій ієрархії елементи мають наступні властивості.

  • elem.parentNode - вибере батьківський elem.
  • elem.childNodes - псевдомасив, зберігає всі дочірні елементи, включно з текстовими.
  • elem.children - псевдомасив, зберігає тільки дочірні вузли-елементи, тобто ті, що відповідають тегам.
  • elem.firstChild - вибере перший дочірній елемент всередині elem, включно з текстовими вузлами.
  • elem.firstElementChild - вибере перший дочірній вузол-елемент всередині elem.
  • elem.lastChild - вибере останній дочірній елемент всередині elem, включно з текстовими вузлами.
  • elem.lastElementChild - вибере останній дочірній вузол-елемент всередині elem.
  • elem.previousSibling - вибере елемент «зліва» від elem (його попереднього сусіда).
  • elem.previousElementSibling - вибере вузол-елемент «зліва» від elem (його попереднього сусіда).
  • elem.nextSibling - вибере елемент «праворуч» від elem (його наступного сусіда)
  • elem.nextElementSibling - вибере вузол-елемент «праворуч» від elem (його наступного сусіда).

Відкрий цей приклад в окремому вікні і подивися логи в консолі розробника.

Цікаво

DOM-колекції, як-от childNodes і children - псевдомасиви (NodeList), у них немає більшості методів масиву.