DOM позволяет нам делать что угодно с элементами и их содержимым, но сначала нам нужно достичь соответствующего объекта DOM. Все операции с DOM начинаются с объекта document. Из него мы можем получить доступ к любому узлу.

Самые верхние узлы дерева доступны напрямую как document свойства:

<html> = document.documentElement

Самый верхний узел документа - document.documentElement. Это узел DOM тега <html>.

<body> = document.body

Другой широко используемый узел DOM - это элемент <body> - document.body.

<head> = document.head

Тег <head> доступен как document.head.

С этого момента мы будем использовать два термина:

  • Дочерние узлы (или дочерние узлы) - элементы, которые являются прямыми дочерними элементами. Другими словами, они вложены именно в данную. Например, <head> и <body> являются дочерними элементами элемента <html>.
  • Потомки - все элементы, вложенные в данный, включая дочерние элементы, их дочерние элементы и так далее.

Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему потомкам.

У них просто короткие руки. Если есть дочерние узлы, то всегда верно следующее:

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

Также есть специальная функция elem.hasChildNodes() для проверки наличия дочерних узлов.

Как мы видим, childNodes выглядит как массив. Но на самом деле это не массив, а скорее коллекция - особый итерируемый объект, подобный массиву.

Есть два важных следствия:

Мы можем использовать for..of для итерации по нему:

for (let node of document.body.childNodes) {
  alert(node); 
}

Это потому, что он итерируемый (при необходимости предоставляет свойство Symbol.iterator).

Методы массива работать не будут, потому что это не массив:

alert(document.body.childNodes.filter);

Если мы хотим использовать методы массива

alert( Array.from(document.body.childNodes).filter );

Братья и сестры - это узлы, являющиеся дочерними по отношению к одному и тому же родителю.

Например, здесь <head> и <body> - братья и сестры:

<html>
  <head>...</head><body>...</body>
</html>
  • <body> считается «следующим» или «правильным» братом <head>,
  • <head> считается «предыдущим» или «левым» братом <body>.

Следующий брат находится в свойстве nextSibling, а предыдущий - в previousSibling.

Родитель доступен как parentNode.

Перечисленные выше свойства навигации относятся ко всем узлам. Например, в childNodes мы можем видеть и текстовые узлы, и узлы элементов, и даже узлы комментариев, если они существуют.

Но для многих задач нам не нужны узлы текста или комментариев. Мы хотим управлять узлами элементов, которые представляют теги и формируют структуру страницы.

Ссылки аналогичны приведенным выше, только со словом Element внутри:

  • children - только те дочерние элементы, которые являются узлами элементов.
  • firstElementChild, lastElementChild - первый и последний дочерние элементы.
  • previousElementSibling, nextElementSibling - соседние элементы.
  • parentElement - родительский элемент.