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 (его предыдущего соседа)

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

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

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

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

elem.querySelector(selector)

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

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

elem.querySelectorAll(selector)

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

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

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