parentElement, children, siblings

parentElement, children, nextElementSibling и previousElementSibling — свойства интерфейса Element для навигации по DOM-дереву, возвращающие только узлы-элементы (в отличие от аналогов Node, которые возвращают текстовые узлы тоже).

Зачем нужно

Навигация по дереву — фундаментальная операция при работе с DOM. Свойства Element удобнее низкоуровневых аналогов Node (parentNode, childNodes), так как игнорируют пробельные текстовые узлы и работают только с HTML-элементами.

Где используется

  • Переход к родительскому контейнеру для изменения стиля или данных
  • Итерация по дочерним элементам (вкладки, список, таблица)
  • Навигация по соседним элементам (предыдущий/следующий слайд, пункт меню)

Свойства

const el = document.querySelector('.item');

// Родитель (Element или null)
el.parentElement;

// Все дочерние элементы (живая HTMLCollection, без текстовых узлов)
el.children;
el.children[0];        // первый дочерний элемент
el.children.length;    // количество дочерних

// Первый и последний дочерние элементы
el.firstElementChild;
el.lastElementChild;

// Соседние элементы
el.nextElementSibling;
el.previousElementSibling;

Примеры

Переход к родителю

const btn = document.querySelector('.card__btn');

// Подняться до .card и удалить
const card = btn.parentElement;
card.remove();

// Несколько уровней вверх
const section = btn.parentElement.parentElement;

Итерация по children

const tabs = document.querySelector('.tabs');

[...tabs.children].forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // Убрать active у всех
    [...tabs.children].forEach(t => t.classList.remove('active'));
    // Добавить active текущему
    tab.classList.add('active');
    showPanel(index);
  });
});

Навигация по соседям (карусель)

const slider = document.querySelector('.slider');
let current = slider.firstElementChild;
current.classList.add('active');

document.getElementById('next').addEventListener('click', () => {
  current.classList.remove('active');
  current = current.nextElementSibling || slider.firstElementChild;
  current.classList.add('active');
});

document.getElementById('prev').addEventListener('click', () => {
  current.classList.remove('active');
  current = current.previousElementSibling || slider.lastElementChild;
  current.classList.add('active');
});

Индекс элемента среди соседей

function getIndex(el) {
  let index = 0;
  let prev = el.previousElementSibling;
  while (prev) {
    index++;
    prev = prev.previousElementSibling;
  }
  return index;
}

// Современный способ через children
function getIndexModern(el) {
  return [...el.parentElement.children].indexOf(el);
}

Частые ошибки

  • children vs childNodes — children возвращает только Element-узлы (HTMLCollection), childNodes — все узлы включая текстовые; в большинстве случаев нужен children.
  • HTMLCollection не является массивом — нельзя применять методы массивов напрямую; используйте Array.from(el.children) или [...el.children].
  • parentElement у document — у элемента <html> parentElement равен null; у document нет parentElement вовсе.

Связанные темы

Ресурсы