/this-vs-that GitHub 1316★

parentElement vs parentNode

First of all, you need to know the difference between an element and a node. In summary, an element is a special type of node which represents a single node in our DOM tree. It can be not only an element but also a comment, a document, a text node, etc.

The parentElement and parentNode properties in most cases return the same node:

// Both return <html> element

The only difference is that, the parentElement property can be null if the parent node is not an element node:

// The exception
// returns the Document node

// returns null because <html> element does not
// have a parent element node


By checking whether the parent element exists or not, we can travel from a given element up to the html tag:

while (ele = ele.parentElement) {

The snippet code below calculates the distance from a given element to the top of page:

const distanceToTop = (ele) => {
let x = 0;
while ((ele = ele.parentElement)) {
x += ele.offsetTop;
return x;
Follow me on and to get more useful contents.