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 |
9 |
1.1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
9 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі створено контейнер div з вкладеним елементом p, який містить текст та дочірній елемент span. Є дві кнопки: одна для показу parentElement для елемента span, а інша - для зміни стилю parentElement для елемента p.
При натисканні на кнопку "Показати parentElement" викликається функція showParentElement(), яка отримує parentElement для елемента span (тобто елемент p) та виводить повідомлення в елемент <p> з ідентифікатором output, вказуючи тег батьківського елемента.
При натисканні на кнопку "Змінити стиль parentElement" викликається функція changeParentElementStyle(), яка отримує parentElement для елемента p (тобто елемент div) та змінює його стиль, встановлюючи світло-зелений колір фону та відступ 10 пікселів.
У цьому прикладі ми створюємо новий елемент div та новий елемент p. Потім ми додаємо елемент p як дочірній елемент до елемента div за допомогою методу appendChild(). Після цього ми отримуємо parentElement для елемента p, який повинен бути елементом div. Нарешті, ми перевіряємо, чи дійсно parentElement елемента p є тим самим елементом div, що ми створили раніше, і виводимо результат у консоль.
// Створюємо новий елемент 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, новий елемент span та новий елемент p. Потім ми додаємо елемент span як дочірній елемент до елемента p, а елемент p - як дочірній елемент до елемента div. Після цього ми отримуємо parentElement для елемента span, який повинен бути елементом p. Нарешті, ми змінюємо текст елемента parentElement (тобто елемента p), використовуючи його властивість textContent.
У цьому прикладі продемонстровано, що властивість parentElement повертає найближчий батьківський Element вузла, на відміну від властивості parentNode, яка може повертати інші типи вузлів, такі як Text або Comment. Також показано, що зміна властивостей батьківського елемента впливає на всіх його дочірніх елементів.
// Створюємо новий елемент 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';