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

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

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

Родителем элемента может являться узел Element, узел Document, или узел DocumentFragment. Узлы Document и DocumentFragment никогда не могут иметь родителя, поэтому свойство parentNode всегда будет возвращать значение null. Свойство parentNode также возвращает null, если узел только что был создан и еще не присоединен к дереву DOM.

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

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

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

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

Показать браузеры

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

Совместимостьapi.Node.parentNode

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
parentNode	✓1	✓12	✓1	✓7	✓1.1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

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

JavaScript синтаксис

const parentNode = node.parentNode;

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

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.parentNode.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. В результате чего этот элемент будет скрыт.