JS властивість Element.parentNode
Загальний опис
Властивість parentNode вузла Node представляє батьківський вузол для цього вузла в дереві DOM. Вона повертає безпосереднього батьківського вузла або null, якщо вузол не має батьківського вузла (наприклад, для вузла document). Ця властивість є корисною для навігації та маніпуляції деревом DOM, а також для отримання доступу до батьківських елементів вузла.
Розглянемо простий приклад використання parentNode:
<div id="parent">
<p id="child">Це дочірній вузол</p>
</div>
const childNode = document.getElementById('child');
const parentNode = childNode.parentNode;
console.log(parentNode.id); // "parent"
У цьому прикладі ми спочатку отримуємо вузол <p> за його id. Потім ми використовуємо parentNode, щоб отримати батьківський вузол <div>. Нарешті, ми виводимо id батьківського вузла в консоль.
Властивість parentNode часто використовується в комбінації з іншими властивостями та методами DOM для навігації та маніпуляції деревом. Наприклад, ми можемо видалити вузол зі структури DOM за допомогою parentNode та методу removeChild():
const childNode = document.getElementById('child');
const parentNode = childNode.parentNode;
parentNode.removeChild(childNode);
Тут ми спочатку отримуємо дочірній та батьківський вузли. Потім ми використовуємо removeChild() на батьківському вузлі, передаючи дочірній вузол як аргумент, щоб видалити його з DOM.
Властивість parentNode також корисна для обходу дерева DOM. Наприклад, ми можемо отримати всіх батьківських вузлів для заданого вузла за допомогою циклу:
function getParents(node) {
const parents = [];
let currentNode = node;
while (currentNode.parentNode) {
parents.unshift(currentNode.parentNode);
currentNode = currentNode.parentNode;
}
return parents;
}
const childNode = document.getElementById('child');
const parentNodes = getParents(childNode);
console.log(parentNodes); // Масив батьківських вузлів
У цьому прикладі функція getParents приймає вузол і повертає масив його батьківських вузлів, починаючи з найближчого батьківського вузла. Ми використовуємо цикл while для обходу батьківських вузлів, доки не досягнемо кореневого вузла document (який не має parentNode).
Властивість parentNode є невід'ємною частиною роботи з DOM в JavaScript. Вона дозволяє отримувати доступ до батьківських вузлів, навігувати по дереву DOM, видаляти або вставляти вузли, а також виконувати різноманітні маніпуляції з деревом DOM. Ця властивість є однією з основних для розуміння та роботи зі структурою DOM в JavaScript.
| Порада: | Використовуйте |
| Порада: | Якщо ви плануєте видалити вузол з DOM, використовуйте |
| Порада: | Під час роботи з вузлами, які можуть бути перенесені між документами, використовуйте Ця порада допоможе уникнути помилок при маніпуляціях з вузлами, які можуть бути перенесені між документами або видалені з DOM. |
Синтаксис
Element.parentNodeЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1.1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі створено контейнер div з вкладеним елементом p, який містить текст та дочірній елемент span. Є дві кнопки: одна для показу parentNode для елемента span, а інша - для зміни тексту parentNode для елемента p.
При натисканні на кнопку "Показати parentNode" викликається функція showParentNode(), яка отримує parentNode для елемента span (тобто елемент p) та виводить повідомлення в елемент <p> з ідентифікатором output, вказуючи тег батьківського вузла.
При натисканні на кнопку "Змінити текст parentNode" викликається функція changeParentNodeText(), яка отримує parentNode для елемента p (тобто елемент div) та змінює його текст на "Новий текст батьківського вузла".
Цей приклад демонструє, як можна отримувати parentNode для будь-якого вузла та маніпулювати його властивостями
У цьому прикладі ми створюємо новий елемент div та новий елемент p. Потім ми додаємо елемент p як дочірній елемент до елемента div за допомогою методу appendChild(). Після цього ми отримуємо parentNode для елемента p, який повинен бути елементом div. Нарешті, ми перевіряємо, чи дійсно parentNode елемента p є тим самим елементом div, що ми створили раніше, і виводимо результат у консоль.
// Створюємо новий елемент div
const newDiv = document.createElement('div');
// Створюємо новий елемент p
const newP = document.createElement('p');
newP.textContent = 'Це новий елемент p';
// Додаємо елемент p до елемента div
newDiv.appendChild(newP);
// Отримуємо parentNode для елемента p
const parentNode = newP.parentNode;
// Виводимо parentNode у консоль
console.log(parentNode === newDiv); // Вивід: trueУ цьому прикладі ми створюємо новий елемент div, новий елемент span та новий елемент p. Потім ми додаємо елемент span як дочірній елемент до елемента p, а елемент p - як дочірній елемент до елемента div. Після цього ми отримуємо parentNode для елемента span, який повинен бути елементом p. Нарешті, ми змінюємо текст елемента parentNode (тобто елемента p), використовуючи його властивість textContent.
// Створюємо новий елемент div
const newDiv = document.createElement('div');
// Створюємо новий елемент span
const newSpan = document.createElement('span');
newSpan.textContent = 'Це новий елемент span';
// Створюємо новий елемент p
const newP = document.createElement('p');
newP.textContent = 'Це новий елемент p';
// Додаємо елемент span до елемента p
newP.appendChild(newSpan);
// Додаємо елемент p до елемента div
newDiv.appendChild(newP);
// Отримуємо parentNode для елемента span
const parentNode = newSpan.parentNode;
// Змінюємо текст елемента parentNode
parentNode.textContent = 'Змінений текст елемента p';