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

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

document это часть глобального объекта window, который доступен в скрипте, когда он выполняется в браузере. Также как alert, console.log, prompt и многие другие.

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

• Самый верхний элемент называется корневым (root node).

• Каждый элемент, кроме корневого, имеет только одного родителя.

• У элемента может быть сколько угодно детей.

• Соседи - это элементы с общим родителем.

• Дочерние элементы (дети) - элементы, которые лежат непосредственно внутри текущего (первая вложенность).

• Потомки – все элементы, которые лежат внутри текущего, вместе с их детьми, детьми их детей и так далее. То есть всё поддерево.

Для навигации по этой иерархии у элементов есть следующие свойства.

• 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), у них нет большинства методов массива.