Difference Between Dom Parentnode and Parentelement

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):

Sample Image

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



Leave a reply



Submit