<!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">
<!--This is a comment-->
<h2>Inner</h2>
<span>A</span>
<span>B</span>
<span id="child-c">C</span>
<span>D</span>
<span>E</span>
</div>
</div>
<script>
var a=document.getElementById("inner"). children[3].style.background="yellow";
console.log(a);
var a=document.getElementById("inner"). children[0].innerHTML;
console.log(a);
var a= document.getElementById("inner").childNodes;
console.log(a);
var a= document.getElementById("inner").childNodes[1];
console.log(a);
document.getElementById("inner").childNodes[3].style.background="pink";
</script>
</body>
</html>
OUTPUT
Comments
Post a Comment