Переход между родителями, дочерними и соседними элементами
Перемещайтесь по дереву DOM между связанными узлами.
«Переход между родителями, дочерними и соседними элементами» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Зачем нужен обход DOM
Получив один элемент, часто нужно найти связанные с ним элементы: контейнер вокруг него, вложенные элементы или элемент непосредственно рядом с ним. Свойства для обхода DOM позволяют перемещаться по дереву.
parentElement
parentElement возвращает элемент, содержащий текущий элемент, или null в верхней части дерева.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);Дочерние элементы
children — это динамическая HTMLCollection непосредственных дочерних элементов элемента; текстовые узлы исключаются.
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild и lastElementChild
Эти свойства сразу переходят к первому или последнему дочернему элементу, пропуская текстовые узлы и узлы комментариев.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling возвращает элемент, расположенный непосредственно после текущего элемента у того же родителя.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling перемещает в обратном направлении. Оба свойства возвращают null, если соседнего элемента нет.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Свойства элементов и узлов
Будьте внимательны: childNodes, nextSibling и parentNode включают текстовые узлы, в том числе пробелы. Обычно нужны версии, работающие только с элементами.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest идёт по дереву вверх от текущего элемента и возвращает ближайшего предка или сам элемент, соответствующий селектору.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest для делегирования событий
closest особенно удобен, когда щелчок приходится на вложенный элемент, а получить нужно внешний контейнер, который обрабатывает это событие.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches проверяет, соответствует ли сам элемент селектору, и возвращает логическое значение. Это удобно использовать вместе с обходом дерева.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Объединение шагов обхода
Можно объединять шаги обхода в цепочку, чтобы перемещаться по сложным структурам, например от кнопки вверх к её строке, а затем к следующей строке.
const next = btn.closest("tr").nextElementSibling;Быстрая проверка
Выберите правильное свойство.
Итоги
Вы можете перемещаться вверх с помощью parentElement и closest, переходить к дочерним элементам с помощью children, firstElementChild и lastElementChild, а перемещаться вбок — с помощью nextElementSibling и previousElementSibling. Предпочитайте свойства, работающие только с элементами, чтобы пропускать текстовые узлы с пробелами.
Часто задаваемые вопросы
Урок «Переход между родителями, дочерними и соседними элементами» бесплатный?
Да — полный текст урока «Переход между родителями, дочерними и соседними элементами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переход между родителями, дочерними и соседними элементами»?
Перемещайтесь по дереву DOM между связанными узлами. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Переход между родителями, дочерними и соседними элементами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Выбор элементов с помощью querySelector
- getElementById и getElementsByClassName
- Переход между родителями, дочерними и соседними элементами
- NodeList и HTMLCollection