<!DOCTYPE html>
<html id="main">
<head>
<title>DOM Navigation</title>
<style>
div#outer{
height:200px;
width:400px;
background-color:orange;
position: absolute;
border-radius:10px;
}
div#inner{
width:500px
height:200px;
position: absolute;
background:skyblue;
border-radius:10px;
margin-top:-10px;
margin-left:100px;
}
span{
width:100px;
height:50px;
font-size:35px;
background: white;
word-spacing:50px;
display:inline;
border-radius:5px;
margin:10px;
}
</style>
</head>
<body>
<div id="outer">
<h2>Outer</h2>
<div id="inner">
<h2 id="child-head">Inner</h2>
<span>A</span>
<span>B</span>
<span id="child-c">C</span>
<span>D</span>
<span id="child-e">E</span>
</div>
</div>
<script>
document.getElementById("child-c").nextElementSibling.style.background="red"
var a = document.getElementById("child-c").nextElementSibling. innerHTML;
console.log(a);
document.getElementById("child-c").previousElementSibling.style.color="red"
var a = document.getElementById("child-c").previousElementSibling.innerHTML;
console.log(a);
var a = document.getElementById("child-e"). nextElementSibling;
console.log(a);
var a = document.getElementById("child-head").previousElementSibling;
console.log(a);
var a = document.getElementById("child-c").nextSibling;
console.log(a);
var a = document.getElementById("child-c").previousSibling;
console.log(a);
</script>
</body>
</html>
OUTPUT
Comments
Post a Comment