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.

Синтаксис

Element.parentNode

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо новий елемент 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
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';