Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

JavaScript Dictionary

Home
JavaScript Dictionary
HTML Element .parentNode / parentElement

HTML Element .parentNode / parentElement Since: DOM Level 1（1998）

A property that retrieves the parent of an HTML element. parentNode returns the parent node, while parentElement returns the parent only if it is an HTML element.

Syntax

// Gets the parent node.
var parent = element.parentNode;

// Gets the parent only if it is an HTML element.
var parent = element.parentElement;

Property List

Property	Description
parentNode	Returns the parent node. The parent node may be an HTML element, a Document, or a DocumentFragment. Returns `null` if no parent exists.
parentElement	Returns the parent node only if it is an HTML element. Returns `null` if the parent is not an HTML element, such as a Document.

Sample Code

<div id="container">
	<ul id="list">
		<li id="item">Item 1</li>
	</ul>
</div>

var item = document.querySelector("#item");

// Gets the parent element.
console.log(item.parentNode); // Returns ul#list.
console.log(item.parentElement); // Returns ul#list.

// You can also traverse up to the grandparent.
console.log(item.parentNode.parentNode); // Returns div#container.

// The parent of the html element is Document, so parentElement is null.
var html = document.documentElement;
console.log(html.parentNode); // Returns #document.
console.log(html.parentElement); // Returns null.

Notes

Both element.parentNode and element.parentElement retrieve the parent of an HTML element. In typical DOM operations they return the same result, but they differ when working with the <html> element: its parent is a Document node, not an HTML element. In that case, parentNode returns the Document, while parentElement returns null.

A common pattern is to get the parent of a child element and then call parentElement.removeChild() to remove the child. However, if you simply want to remove an element, using element.remove() is more concise.

To search for an ancestor element, use element.closest(), which efficiently finds a matching ancestor using a CSS selector.