JavaScript parentNode — батьківський вузол
Властивість parentNode повертає батьківський вузол — того, хто містить цей елемент.
Загальний опис
Різниця з parentElement виникає рівно в одному місці — на верхівці дерева. Батьком <html> є сам document, і це не елемент. Тому document.documentElement.parentNode дає document, а parentElement — null.
У 99% випадків це не має значення. Але в циклі, що піднімається вгору по дереву, саме parentElement зупиниться сам, а parentNode продовжить і видасть щось несподіване.
- Порада
-
Шукаєш предка за селектором — не пиши цикл угору по
автор: NagarDparentNode. Для цього єclosest():event.target.closest('li').
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| parentNode | 1+ | 1+ | 1+ | 7+ | 12+ | 9+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| parentNode | yes | yes | yes | yes |
Приклади
+ запропонувати свій приклад у пісочниці
Підйом по дереву: parentNode проти closest().
HTML
<ul><li class="item"><span id="inner">Текст</span></li></ul>JS
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'));Коментарі
Коментарів ще немає — будьте першим!