<!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>Inner</h2>
<span>A</span>
<span>B</span>
<span id="child-c">C</span>
<span>D</span>
<span>E</span>
</div>
</div>
<script>
document.getElementById("outer").firstElementChild. style.textDecoration="underline";
var a = document.getElementById("outer").firstElementChild.innerHTML;
console.log(a);
document.getElementById("inner").lastElementChild. style.color="red";
var a = document.getElementById("inner").lastElementChild.innerHTML;
console.log(a);
var a = document.getElementById("inner").firstChild;
console.log(a);
var a = document.getElementById("inner").lastChild;
console.log(a);
</script>
</body>
</html>
OUTPUT
Comments
Post a Comment