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, навігації та взаємодії між елементами. Вона забезпечує зручний спосіб отримати доступ та змінити батьківський елемент вузла, що дозволяє створювати динамічні та інтерактивні веб-додатки.

правити

Порада

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

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

Порада

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

const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;
const siblingElement = parentElement.querySelector('.sibling');

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

Порада

Пам'ятайте, що parentElement повертає null, якщо вузол не має батьківського елемента. Це може статися, наприклад, для вузла document або вузлів, які є дочірніми вузлами document.documentElement. Тому завжди перевіряйте результат перед виконанням будь-яких операцій з батьківським елементом.

const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;
if (parentElement) {
  // Виконайте операції з батьківським елементом
} else {
  // Обробіть випадок, коли батьківський елемент відсутній
}

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

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

Синтаксис

Element.parentElement

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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