JavaScript свойство parentElement

JavaScript Node

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

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

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

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

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

JavaScript синтаксис:

const parentElement = node.parentElement;

node - Node

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

Document Object Model (DOM) Level 4 (Working Draft)

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства parentElement</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.parentElement.style.display = "none"; // устанавливаем родительскому элементу текущего элемента значение свойства display равным none
	}
		</script>
	</body>
</html>

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

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

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