JavaScript свойство parentNode

JavaScript Node

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

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
parentNodeДаДаДаДаДаДа

JavaScript синтаксис:

const parentNode = node.parentNode;

node - Node

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

Document Object Model (DOM) Level 2

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства parentNode</title>
	</head>
	<body>
		<div>
			<p onclick = "myFunc(this)">Click me</p> <!-- добавляем атрибут событий onclick -->
		</div>
		<div>
			<p onclick = "myFunc(this)">Click me</p> <!-- добавляем атрибут событий onclick -->
		</div>
		<div>
			<p onclick = "myFunc(this)">Click me</p> <!-- добавляем атрибут событий onclick -->
		</div>
		<script>
	function myFunc(currentElem) {
	  currentElem.parentNode.style.display = "none"; // устанавливаем родительскому узлу текущего элемента значение свойства display равным none
	}
		</script>
	</body>
</html>

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

Результат нашего примера:

Пример использования JavaScript свойства parentNode
Пример использования JavaScript свойства parentNode
JavaScript Node