HTML DOM Element parentElement attribute
- Previous page parentNode
- Next page previousSibling
- Go back to the previous level HTML DOM Elements object
Definition and usage
parentElement
property returns the parent element of the specified element.
parentElement
and parentNode The difference between parentElement
Returns null
:
document.body.parentNode; // Returns <html> element document.body.parentElement; // Returns <html> element document.documentElement.parentNode; // Returns document node document.documentElement.parentElement; // Returns null(<html> has no parent ELEMENT node)
In most cases, which attribute to use does not matter, but parentNode
It may be the most popular.
This property is read-only.
HTML nodes and elements
in HTML DOM(Document Object Model), an HTML document is a collection of nodes that have (or do not have) child nodes.
Noderefers to element nodes, text nodes, and annotation nodes.
Elementwhitespace between them is also a text node.
while elements are just element nodes.
Child nodes and child elements
childNodes ReturnsChild nodes(element nodes, text nodes, and annotation nodes).
children ReturnsChild elements(not text and annotation nodes).
Siblings and element siblings
siblingsare "brothers" and "sisters".
siblingsare nodes that have the same parent node (in the same childNodes in the list).
Element siblingsare elements that have the same parent element (in the same children in the list).
Instance
Example 1
Get the node name of the parent element of the <li> element:
var x = document.getElementById("myLI").parentElement.nodeName;
Example 2
Clicking the element (<span>) can hide its parent element (<div>):
<div> <span onclick="this.parentElement.style.display = 'none';">x</span> </div>
Syntax
node.parentElement
Return value
Type | Description |
---|---|
Element object | represents the parent element node of the node. |
null | if the node has no parent node. |
Browser support
element.parentElement
is a feature of DOM Level 3 (2004).
All browsers fully support it:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Support | 9-11 | Support | Support | Support | Support |
- Previous page parentNode
- Next page previousSibling
- Go back to the previous level HTML DOM Elements object