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.

правити

Порада

Використовуйте parentNode для обходу дерева DOM. Ви можете отримати всіх батьківських вузлів для заданого вузла за допомогою циклу та властивості parentNode. Це корисно для різноманітних завдань, таких як пошук певного елемента в ієрархії або виконання операцій на всіх батьківських вузлах.

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

Порада

Якщо ви плануєте видалити вузол з DOM, використовуйте parentNode разом з методом removeChild(). Спочатку отримайте батьківський вузол за допомогою parentNode, а потім викличте removeChild() на батьківському вузлі, передаючи дочірній вузол як аргумент.

const childNode = document.getElementById('child');
const parentNode = childNode.parentNode;
parentNode.removeChild(childNode);

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

Порада

Під час роботи з вузлами, які можуть бути перенесені між документами, використовуйте parentNode для перевірки належності вузла до поточного документа. Якщо parentNode вузла дорівнює null, це означає, що вузол не належить до поточного документа, і ви повинні обережно поводитися з ним.

function processNode(node) {
  if (node.parentNode === null) {
    console.warn('Вузол не належить до поточного документа');
    return;
  }
  // Виконайте операції з вузлом
}

Ця порада допоможе уникнути помилок при маніпуляціях з вузлами, які можуть бути перенесені між документами або видалені з DOM.

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

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

Синтаксис

Element.parentNode

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

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