В JavaScript для навигации по DOM-дереву и получения родительского элемента используется свойство parentNode. Оно позволяет получить доступ к предкам элемента в цепочке наследования. Знание особенностей parentNode важно для решения задач по обходу и манипуляции элементами страницы.
Обзор свойства parentNode
Свойство parentNode возвращает родительский узел для данного элемента DOM-дерева. Оно позволяет получить ссылку на элемент, который содержит текущий элемент в качестве дочернего.
Родителем может быть:
- Элемент DOM-дерева
- Объект Document
- Объект DocumentFragment
Если элемент не имеет родителя, например только что создан, но еще не добавлен в документ, то parentNode вернет null.
Особенности parentNode:
- Доступно только для чтения
- Возвращает ссылку на узел, а не конкретный элемент
- Отличается от parentElement, которое возвращает непосредственно элемент
Благодаря parentNode можно получить доступ к любому предку элемента, поднимаясь рекурсивно по цепочке родителей. Это удобно использовать при обходе и манипуляции DOM-деревом.
Примеры использования parentNode
Рассмотрим примеры практического применения свойства parentNode в JavaScript.
Получение непосредственного родителя
Чтобы получить ссылку на родительский элемент, достаточно обратиться к parentNode:
const parent = document.querySelector('.child').parentNode;
Здесь мы получаем элемент с классом .child, а затем через parentNode достаем его непосредственного родителя.
Поиск предка по условию
Можно подниматься по цепочке предков до элемента, удовлетворяющего какому-либо условию:
let current = document.querySelector('.inner'); while (current.parentNode) { if (current.matches('.outer')) { // нашли нужного предка break; } current = current.parentNode; }
Здесь мы ищем ближайшего предка с классом .outer, начиная от элемента .inner.
Рекурсивный подъем по DOM
С помощью рекурсии можно подняться от элемента до корневого узла document:
function traverseUp(node) { if (node.parentNode) { traverseUp(node.parentNode); } // обработка элемента } traverseUp(document.querySelector('.inner'));
Этот подход удобно использовать для обхода элементов снизу вверх.
Проверка наличия родителя
if (!document.body.parentNode) { // элемент не в DOM }
Свойство parentNode позволяет проверить, добавлен ли элемент в документ.
Изменение стилей родителя
document.querySelector('.child').parentNode.style.color = 'red';
Можно обратиться к родителю и изменить его CSS-стили.
Вставка элементов
const parent = document.querySelector('.parent'); parent.parentNode.insertBefore(newEl, parent.nextSibling);
С помощью parentNode можно вставлять новые элементы относительно родителя.
Удаление через родителя
const child = document.querySelector('.child'); child.parentNode.removeChild(child);
Элемент можно удалить из DOM, обратившись к его родителю.
Как видим, parentNode можно успешно применять для навигации и манипуляции DOM-деревом. Рассмотрим далее полезные советы для использования этого свойства.
Родительский узел элемента javascript parentNode позволяет получить доступ к предкам и управлять структурой DOM-дерева.
В этой части статьи мы рассмотрели обзор свойства parentNode и примеры его использования в JavaScript. Это базовые возможности получения родителя и навигации по DOM-дереву. Далее мы изучим полезные советы для оптимизации работы с parentNode.
