Difference between DOM parentNode and parentElement
parentElement
is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages.
In most cases, it is the same as parentNode
. The only difference comes when a node's parentNode
is not an element. If so, parentElement
is null
.
As an example:
document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element
document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null
(document.documentElement.parentNode === document); // true
(document.documentElement.parentElement === document); // false
Since the <html>
element (document.documentElement
) doesn't have a parent that is an element, parentElement
is null
. (There are other, more unlikely, cases where parentElement
could be null
, but you'll probably never come across them.)
DOM ParentElement vs ParentNode
Bergi answered this question succinctly. Compliance with DOM standards suggests that parentNode
is the preferable term. parentElement
is not universally supported and does not introduce enough unique functionality (see the related question for further discussion on that point) to justify its use.
Difference between offsetParent and parentElement or parentNode
Stay clear of offsetParent
, you'll have to add lots of hacks and checks to ensure you get it right.
Try using getBoundingClientRect instead.
In which cases will element.parentElement or element.parentNode be null in a HTML DOM?
The element c
returned by your query has no parentElement
, but it does have a parentNode
which is a shadowRoot
.
ShadowRoots don't have a parentNode
property (which is why your c.parentNode.parentNode
call returns null
) but you can return the element that the shadowRoot
is attached by accessing the shadowRoots host
property (c.parentNode.host
).
See the docs: ShadowRoot
Or related question: Get shadow root host element
What is this.parentElement?
It's the same as this.parentNode
: it gives you the node that contains this
as a childNode. this
will be pg
, presumably an Element of some kind; this.parentNode
will be the Element that contains it, or the document
object if pg
is the root element.
parentElement
is a non-standard IE extension. Since IE also supports the standard property parentNode
, parentElement
should never be used.
Alternatively, maybe it's just an arbitrary object with a property called parentElement
, in which case it could be anything at all. There's no real way to tell from that code, but it would be unusual to be setting arbitrary properties like myfunc
on an Element node.
Difference between Node object and Element object?
A node
is the generic name for any type of object in the DOM hierarchy. A node
could be one of the built-in DOM elements such as document
or document.body
, it could be an HTML tag specified in the HTML such as <input>
or <p>
or it could be a text node that is created by the system to hold a block of text inside another element. So, in a nutshell, a node
is any DOM object.
An element
is one specific type of node
as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).
The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling. That structure forms a tree-like hierarchy. The document
node has the html
node as its child.
The html
node has its list of child nodes (the head
node and the body
node). The body
node would have its list of child nodes (the top level elements in your HTML page) and so on.
So, a nodeList
is simply an array-like list of nodes
.
An element is a specific type of node, one that can be directly specified in the HTML with an HTML tag and can have properties like an id
or a class
. can have children, etc... There are other types of nodes such as comment nodes, text nodes, etc... with different characteristics. Each node has a property .nodeType
which reports what type of node it is. You can see the various types of nodes here (diagram from MDN):
You can see an ELEMENT_NODE
is one particular type of node where the nodeType
property has a value of 1
.
So document.getElementById("test")
can only return one node and it's guaranteed to be an element (a specific type of node). Because of that it just returns the element rather than a list.
Since document.getElementsByClassName("para")
can return more than one object, the designers chose to return a nodeList
because that's the data type they created for a list of more than one node. Since these can only be elements (only elements typically have a class name), it's technically a nodeList
that only has nodes of type element in it and the designers could have made a differently named collection that was an elementList
, but they chose to use just one type of collection whether it had only elements in it or not.
EDIT: HTML5 defines an HTMLCollection
which is a list of HTML Elements (not any node, only Elements). A number of properties or methods in HTML5 now return an HTMLCollection
. While it is very similar in interface to a nodeList
, a distinction is now made in that it only contains Elements, not any type of node.
The distinction between a nodeList
and an HTMLCollection
has little impact on how you use one (as far as I can tell), but the designers of HTML5 have now made that distinction.
For example, the element.children
property returns a live HTMLCollection.
Related Topics
JavaScript to Sort Contents of Select Element
How to Rotate a 3D Object on Axis Three.Js
Why Can't I Update Props in React.Js
Getting Error "Form Submission Canceled Because the Form Is Not Connected"
How to Highlight the Text of the Dom Range Object
What Is Settimeout Doing When Set to 0 Milliseconds
Best Practice for Using Window.Onload
How to Load a JavaScript File Dynamically
Why Were Es5 Object Methods Not Added to Object.Prototype
How to Check If the React Component Is Unmounted
Deep Copy in Es6 Using the Spread Syntax
How to Filter Array When Object Key Value Is in Array
How to Set the Prototype of a JavaScript Object That Has Already Been Instantiated
Jquery.Getjson - Access-Control-Allow-Origin Issue
Firebase Query Methods Startat() Taking Case Sensitive Parameters
Jquery - Script Tags in the HTML Are Parsed Out by Jquery and Not Executed
Puppeteer Page.Evaluate Queryselectorall Return Empty Objects