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