JavaScript свойство Node.parentElement

Определение и применение

JavaScript свойство parentElement объекта Node возвращает элемент, который является родителем данного узла. В том случае, если узел не имеет родителя, или родитель не является элементом, то это свойство вернет значение null. Свойство доступно только для чтения.

Для того, чтобы возвратить узел, который является родительским для этого узла, а не элемент, то вы можете воспользоваться свойством parentNode.

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Node.parentElement
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`parentElement`	✓1	✓12	✓9	✓7 Версия 7 выпущена в 2003 г. Примечание MDN (англ.) Before Opera 15, this feature was only supported on `Element`.	✓1.1	✓18	✓9	✓10.1 Версия 10.1 выпущена в 2010 г. Примечание MDN (англ.) Before Opera Android 14, this feature was only supported on `Element`.	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const parentElement = node.parentElement;

Спецификация

DOM Standard.

Пример использования

Скрытие родительского элемента

Нажмите ▶ и щёлкните по любому абзацу Click me: его родительский div получит display: none и исчезнет вместе с абзацем.

index.html

HTML

<div><p data-migration-click-0="">Click me</p></div>
<div><p data-migration-click-2="">Click me</p></div>
<div><p data-migration-click-4="">Click me</p></div>

main.js

JavaScript

function myFunc(currentElem) {
    currentElem.parentElement.style.display = 'none'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc(this)
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')
document.querySelector('[data-migration-click-2]').addEventListener('click', function () {
    myFunc(this)
})
document.querySelector('[data-migration-click-2]').removeAttribute('data-migration-click-2')
document.querySelector('[data-migration-click-4]').addEventListener('click', function () {
    myFunc(this)
})
document.querySelector('[data-migration-click-4]').removeAttribute('data-migration-click-4')

В этом примере с использованием метода addEventListener() при нажатии на определенный HTML элемент <p>, мы вызываем функцию, которая устанавливает родительскому элементу элемента <p>, по которому произошло нажатие, значение CSS свойства display равным none. В результате чего этот элемент будет скрыт.