The parentNode and parentElement properties in the DOM (Document Object Model) represent the parent node of a given node. However, there are a few key differences between them.
parentNode is a property that exists on all DOM nodes and represents the parent node of the current node. It can be any type of node, including element nodes, text nodes, or even the document node.
parentElement, on the other hand, is a property specifically available on element nodes. It represents the parent element of the current element node. If the current node is not an element node, parentElement will be null.
Here’s a comparison between parentNode and parentElement in tabular format:
| # | parentNode | parentElement |
|---|---|---|
| Description | Represents the parent node of the current node. | Represents the parent element of the current element node. |
| Type | Works for all types of nodes (element, text, etc.). | Only works for element nodes. |
| Compatibility | Supported by all browsers. | Supported by all modern browsers, but may not work in older ones. |
| Value | Can be any type of node, including non-element nodes. | Always an element node, or null if the parent is not an element. |
Difference example parentNode vs parentElement
Here’s a simple example to illustrate the difference:
HTML
<div id="parent">
<span id="child">Hello</span>
</div>
JavaScript
const childNode = document.getElementById('child');
const parentNode = childNode.parentNode;
const parentElement = childNode.parentElement;
console.log(parentNode); // <div id="parent">...</div>
console.log(parentElement); // <div id="parent">...</div>
In the example above, both parentNode and parentElement will refer to the same <div> element with the id of “parent” because the parent of the <span> element is an element node.
However, if we consider a non-element node like a text node:
HTML
<div id="parent">
Hello, <span id="child">World!</span>
</div>
JavaScript
const childNode = document.getElementById('child').firstChild;
const parentNode = childNode.parentNode;
const parentElement = childNode.parentElement;
console.log(parentNode); // <div id="parent">...</div>
console.log(parentElement); // null
In this case, parentNode will still refer to the <div> element, but parentElement will be null because the parent of the text node is not an element node.
Here’s a complete example that showcases the usage of parentNode and parentElement:
<!DOCTYPE html>
<html>
<head>
<title>parentNode vs parentElement Example</title>
</head>
<body>
<div id="parent">
<p id="child">This is a paragraph</p>
</div>
<script>
// Accessing parent using parentNode
const childNode = document.getElementById('child');
const parentNode = childNode.parentNode;
console.log(parentNode); // <div id="parent">...</div>
// Accessing parent using parentElement
const parentElement = childNode.parentElement;
console.log(parentElement); // <div id="parent">...</div>
</script>
</body>
</html>
Output:
Comment if you have any doubts or suggestions on this Js Difference topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version