JS parent Method

parentNode:

The parentNode property returns the parent node of an element or node.

The parentNode property is read-only.

parentElement:

The parentElement property returns the parent element of the specified element.

The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node:

html file

<!DOCTYPE html>
<html id="main">
<head>
    <title>DOM Navigation</title>
</head>
<style>
    #outer{
        width: 550px;
        height: 300px;
        padding:10px 10px;
        margin: 0 auto;
        background: lightsalmon;
    }

    #inner{
       width: 500px;
        height: 200px;
        padding:10px 10px;
        margin:0 auto ;
        background: mediumorchid;
    }

    #inner div{
        display: inline-block;
        background: #fff;
        width: 95px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
    <div id="outer">
        <h2>Outer</h2>
        <div id="inner">
            <h2>Inner</h2>
            <div>A</div>
            <div>B</div>
            <div id="child-c">C</div>
            <div>D</div>
            <div>E</div>
        </div>
    </div>
    <script src="js/dom-nav.js"></script>
</body>
</html>

dom-nav.js

//var a = document.getElementById("inner").parentElement;

//var a = document.getElementById("outer").parentElement;

//var a = document.body.parentElement;

//var a = document.getElementById("inner").parentElement.style.background = "red";

/* document.getElementById("child-c").parentElement.style.background = "red";
    var a = document.getElementById("child-c").parentElement; */


document.getElementById("child-c").parentElement.style.background = "red";
var a = document.getElementById("main").parentNode; 

console.log(a);