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;
};
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved