Document Object Module parentElement and parentNode DOM Traversal Methods tutorial in JavaScript

October 09, 2024

<!DOCTYPE html>

<html lang="en" id="main">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM parentElement parentNode Traversal Methods JavaScript</title>
    <link rel="stylesheet" href="css/DOM_parentElement_parentNode_Traversal_Methods.css">
</head>

<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_parentElement_parentNode_Traversal_Methods.js"></script>
</body>

</html>




Below File is css/DOM_parentElement_parentNode_Traversal_Methods.css File
#outer {
    background: #ffa07a;
    width: 550px;
    height: 300px;
    padding: 10px 10px;
    margin: 0 auto;
}

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

#inner div {
    background: #ffffff;
    width: 95px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
}





Below File is js/DOM_parentElement_parentNode_Traversal_Methods.js File
var a = document.getElementById("inner").parentElement;
console.log(a);

var a2 = document.getElementById("outer").parentElement;
console.log(a2);

var a3 = document.body.parentElement;
console.log(a3);

// document.getElementById("inner").parentElement.style.background = "#ff0000";
// var a4 = document.getElementById("inner").parentElement;
// console.log(a4);

// document.getElementById("child-C").parentElement.style.background = "#ff0000";
// var a5 = document.getElementById("child-C").parentElement;
// console.log(a5);

// document.getElementById("child-C").parentNode.style.background = "#ff0000";
// var a6 = document.getElementById("child-C").parentNode;
// console.log(a6);

//Main difference between "parentElement" and "parentNode" is that if there is no parent present then "parentElement" will return NULL and "parentNode" will return anything(Not NULL)
document.getElementById("child-C").parentNode.style.background = "#ff0000";
var a7 = document.getElementById("main").parentNode;
console.log(a7);

document.getElementById("child-C").parentNode.style.background = "#ff0000";
var a8 = document.getElementById("main").parentElement;
console.log(a8);