<!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>
console.log("Parent Element");
var a= document.getElementById ("inner").parentElement;
console.log(a);
var a= document.getElementById ("outer").parentElement;
console.log(a);
var a= document.body.parentElement;
console.log(a);
var a= document.getElementById ("main").parentElement;
console.log(a);
var a= document.getElementById ("inner").parentElement.style.background="lightgreen";
console.log("Parent Node");
var a= document.getElementById ("inner").parentNode;
console.log(a);
var a= document.getElementById ("outer").parentNode;
console.log(a);
var a= document.body.parentNode;
console.log(a);
var a= document.getElementById ("main").parentNode ;
console.log(a);
document.getElementById ("outer").parentNode.style.background ="pink";
</script>
</body>
</html>
OUTPUT
Comments
Post a Comment