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

Навигация по DOM начинается с уже найденного элемента и позволяет перейти к ближайшей части интерфейса без нового поиска по всей странице.

• Навигация от найденного элемента
• Родитель и дети
• Соседние элементы
• closest()
• Итого

Навигация от найденного элемента

От найденного элемента можно перейти к его родителю, детям или соседям.

Во всех примерах используем такую разметку:

<article class="product">
  <h2 class="product__title">Наушники</h2>
  <p class="product__price">4 990 ₽</p>
  <button class="product__button">Купить</button>
</article>

Родитель и дети

Свойство parentElement возвращает непосредственного родителя элемента.

const price = document.querySelector('.product__price');
const product = price.parentElement;

console.log(product); // <article class="product">

Родитель цены - элемент article. Его прямые дочерние элементы доступны через свойство children.

Если у элемента нет родительского HTML-элемента, parentElement вернёт null.

const productElement = document.querySelector('.product');
const elements = productElement.children;
const title = productElement.firstElementChild;
const button = productElement.lastElementChild;

console.log(elements); // h2, p и button

children содержит только прямых детей. В этом примере это h2, p и button, но не элементы, которые могут быть вложены в них.

Соседние элементы

Соседями называют элементы с одним родителем. От цены можно перейти к заголовку или кнопке:

const productPrice = document.querySelector('.product__price');
const previousElement = productPrice.previousElementSibling;
const nextElement = productPrice.nextElementSibling;

console.log(previousElement); // h2.product__title
console.log(nextElement); // button.product__button

У первого элемента нет предыдущего соседа, а у последнего - следующего. В этих случаях свойства вернут null.

closest()

Метод closest() ищет ближайший элемент, который подходит под CSS-селектор. Поиск начинается с текущего элемента и продолжается вверх по дереву. Поэтому метод может вернуть сам элемент, если он соответствует селектору.

const productButton = document.querySelector('.product__button');
const productFromButton = productButton.closest('.product');

console.log(productFromButton); // <article class="product">

closest() удобен, когда нужен не непосредственный родитель, а ближайший контейнер с конкретным классом или другим селектором. Если подходящего элемента нет, метод вернёт null.

Для навигации по HTML-элементам используйте свойства firstElementChild, nextElementSibling и похожие. Свойства firstChild и nextSibling могут вернуть текстовый узел из-за пробелов и переносов в разметке.

Итого

parentElement и children помогают перейти между родителем и детьми. Для элементов на одном уровне используют previousElementSibling и nextElementSibling, а closest() находит ближайший подходящий контейнер.

Навигация позволяет работать с нужной частью интерфейса без повторного поиска по всей странице.