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
document.body.parentNode;
document.body.parentElement;

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
document.documentElement.parentNode;

// returns null because <html> element does not
// have a parent element node
document.documentElement.parentElement;

Tip

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;
};

Object vs Map ++value vs value++