DOM nextSibling and previousSibling 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 nextSibling previousSibling Traversal Methods JavaScript</title>
    <link rel="stylesheet" href="css/DOM_nextSibling_previousSibling_Traversal_Methods_JavaScript.css">
</head>

<body>
    <div id="outer">
        <h2>Outer</h2>
        <div id="inner">
            <h2 id="child-head">Inner</h2>
            <div>A</div>
            <div>B</div>
            <div id="child-C">C</div>
            <div>D</div>
            <div id="child-E">E</div>
        </div>
    </div>
    <script src="js/DOM_nextSibling_previousSibling_Traversal_Methods_JavaScript.js"></script>
</body>

</html>



Below File is css/DOM_nextSibling_previousSibling_Traversal_Methods_JavaScript.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_nextSibling_previousSibling_Traversal_Methods_JavaScript.js File
var a = document.getElementById("child-C").nextElementSibling;
console.log(a);

var a2 = document.getElementById("child-C").nextElementSibling.innerHTML;
console.log(a2);

var a3 = document.getElementById("child-C").previousElementSibling;
console.log(a3);

var a4 = document.getElementById("child-C").previousElementSibling.innerHTML;
console.log(a4);

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

document.getElementById("child-C").nextElementSibling.style.background = "#ffff00";
var a6 = document.getElementById("child-C").nextElementSibling.innerHTML;
console.log(a6);

var a7 = document.getElementById("child-E").nextElementSibling;
console.log(a7);

var a8 = document.getElementById("child-head").previousElementSibling;
console.log(a8);

//Main difference between "nextSibling" and "nextElementSibling" as well as "previousSibling" and "previousElementSibling" is that "nextElementSibling" and "previousElementSibling" both target HTML Tags and "nextSibling" and "previousSibling" both target Spaces, Comments, Enters also.
//"previousSibling" and "nextSibling" both target spaces, comments, Enters also.
var a9 = document.getElementById("child-C").previousSibling;
console.log(a9);

var a10 = document.getElementById("child-C").nextSibling;
console.log(a10);