nextSibling
property returns the next node on the same tree level.
The nextSibling
returnes a node object.
The nextSibling
property is read-only.
previousSibling
property returns the previous node on the same tree level.
The previousSibling
property returns a node object.
The previousSibling
property is read-only.
<!DOCTYPE html>
<html id="main">
<head>
<title>Basic Layout</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 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-nav.js"></script>
</body>
</html>
//var a = document.getElementById("child-C").nextElementSibling;
//var a = document.getElementById("child-C").previousElementSibling;
//var a = document.getElementById("child-C").previousElementSibling.innerHTML ;
/* document.getElementById("child-C").previousElementSibling.style.background = "red";
var a = document.getElementById("child-C").previousElementSibling.innerHTML; */
/* document.getElementById("child-C").nextElementSibling.style.background = "red";
var a = document.getElementById("child-C").nextElementSibling; */
//var a = document.getElementById("child-E").nextElementSibling;
//var a = document.getElementById("child-head").previousElementSibling;
//var a = document.getElementById("child-C").previousSibling;
var a = document.getElementById("child-C").nextSibling;
console.log(a);