JS властивість Element.parentElement

Загальний опис

parentElement - це властивість вузлів у моделі об'єктної моделі документа (DOM), яка повертає батьківський елемент вузла, на якому викликана ця властивість. Вона дозволяє отримати доступ до батьківського елемента та маніпулювати ним за допомогою JavaScript. Ця властивість широко використовується у веб-розробці для навігації та змін структури DOM.

Використання parentElement досить просте. Розглянемо приклад з HTML-структурою:

<div id="parent">
  <p id="child">Це дочірній текстовий вузол</p>
</div>

Ми можемо отримати доступ до батьківського елемента div через властивість parentElement елемента p:

const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;
console.log(parentElement); // <div id="parent">...</div>

Властивість parentElement повертає null, якщо вузол не має батьківського елемента, наприклад, для вузла document або вузлів, які є дочірніми вузлами document.documentElement.

Одним із поширених випадків використання parentElement є маніпуляція батьківським елементом на основі дій, виконаних на дочірньому елементі. Наприклад, ми можемо додати клас CSS до батьківського елемента при натисканні на дочірній елемент:

<div id="parent">
  <button id="child">Натисніть мене</button>
</div>

const childButton = document.getElementById('child');
childButton.addEventListener('click', () => {
  const parentElement = childButton.parentElement;
  parentElement.classList.add('highlighted');
});

Властивість parentElement також корисна для навігації по DOM-ієрархії та виконання операцій на батьківських елементах. Наприклад, ми можемо змінити текст батьківського елемента на основі значення введеного в текстове поле:

<div id="parent">
  <input type="text" id="child" placeholder="Введіть текст">
</div>

const childInput = document.getElementById('child');
const parentElement = childInput.parentElement;

childInput.addEventListener('input', () => {
  parentElement.textContent = childInput.value;
});

Крім того, parentElement може бути використана для перевірки, чи є елемент дочірнім елементом певного батьківського елемента, що може бути корисним для різних цілей, наприклад, для валідації або авторизації.

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

Синтаксис

Element.parentElement

Значення

Return

Переглядачі

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

Приклади

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

// Створюємо новий елемент div
const newDiv = document.createElement('div');

// Створюємо новий елемент p
const newP = document.createElement('p');
newP.textContent = 'Це новий елемент p';

// Додаємо елемент p до елемента div
newDiv.appendChild(newP);

// Отримуємо parentElement для елемента p
const parentElement = newP.parentElement;

// Виводимо parentElement у консоль
console.log(parentElement === 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);

// Отримуємо parentElement для елемента span
const parentElement = newSpan.parentElement;

// Змінюємо текст елемента parentElement
parentElement.textContent = 'Змінений текст елемента p';