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

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

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

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

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

• Каждый узел, кроме 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 — псевдомассивы, у них нет большинства методов массивов.

Типы данных узлов и коллекций на MDN

2. Поиск DOM-узлов

Итак, мы уже знаем что DOM-узел - это объект. У него есть методы и свойства. Самое время научиться находить элемент по произвольному CSS-селектору.

Методы elem.querySelector* это современный стандарт для поиска DOM-узлов. Они позволяют найти узел или группу узлов по CSS-селектору любой сложности.

elem.querySelector(selector)
Copy

Используется когда мы заведомо знаем, что подходящий элемент только один.

• Возвращает первый найденный элемент внутри elem, соответствующий CSS-селектору selector.

• Если ничего не найдено, вернет null.

elem.querySelectorAll(selector)
Copy

Используется когда мы заведомо знаем, что подходящих элементов более одного.

• Возвращает псевдомассив всех элементов внутри elem, удовлетворяющих CSS-селектору selector.

• Если ничего не найдено, вернет пустой массив.

Ссылка на пример в Codepen.io