Node: parentElement property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The read-only parentElement property of Node interface
returns the DOM node's parent Element, or null if the node either has no
parent, or its parent isn't a DOM Element. Node.parentNode on the other hand returns any kind of parent, regardless of its type.
Value
An Element that is the parent element of the current node,
or null if there isn't one.
Example
Using parentElement
This example sets the parent of node to have a red text color.
if (node.parentElement) {
node.parentElement.style.color = "red";
}
parentElement being null
parentElement can be null if the node has no parent (for example, because it isn't attached to a tree) or its parent is not an Element. On the other hand, Node.parentNode always returns the parent node, which may be a Document or other node types.
<!doctype html>
<html lang="en-US">
<body>
<script>
const html = document.querySelector("html");
console.log(html.parentElement); // null
console.log(html.parentNode); // document
</script>
</body>
</html>
Specifications
| Specification |
|---|
| DOM # ref-for-dom-node-parentelement① |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
parentElement
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.