JavaScript parentNode — батьківський вузол

Властивість parentNode повертає батьківський вузол — того, хто містить цей елемент.

правити

Загальний опис

Різниця з parentElement виникає рівно в одному місці — на верхівці дерева. Батьком <html> є сам document, і це не елемент. Тому document.documentElement.parentNode дає document, а parentElement — null.

У 99% випадків це не має значення. Але в циклі, що піднімається вгору по дереву, саме parentElement зупиниться сам, а parentNode продовжить і видасть щось несподіване.

правити

Порада

Шукаєш предка за селектором — не пиши цикл угору по parentNode. Для цього є closest(): event.target.closest('li').

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.1	7	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<ul><li class="item"><span id="inner">Текст</span></li></ul>

const inner = document.getElementById('inner');

console.log(inner.parentNode.className); // 'item'

// різниця видно лише на верхівці
console.log(document.documentElement.parentNode);    // #document
console.log(document.documentElement.parentElement); // null

// шукати предка циклом не треба — є closest()
console.log(inner.closest('.item'));