DOM children and ChildNodes Traversal Methods tutorial in JavaScript
<!DOCTYPE html>
<html lang="en" id="main">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>children ChildNodes Traversal Methods JavaScript</title>
<link rel="stylesheet" href="css/DOM_children_ChildNodes_Traversal_Methods_JavaScript.css">
</head>
<body>
<div id="outer">
<h2>Outer</h2>
<div id="inner">
<h2>Inner</h2>
<div>A</div>
<div>B</div>
<div id="child-C">C</div>
<div>D</div>
<div>E</div>
</div>
</div>
<script src="js/DOM_children_ChildNodes_Traversal_Methods_JavaScript.js"></script>
</body>
</html>
Below File is css/DOM_children_ChildNodes_Traversal_Methods_JavaScript.css
#outer {
background: #ffa07a;
width: 550px;
height: 300px;
padding: 10px 10px;
margin: 0 auto;
}
#inner {
background: #ba55d3;
width: 500px;
height: 200px;
padding: 10px 10px;
margin: 0 auto;
}
#inner div {
background: #ffffff;
width: 95px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
}
Below File is js/DOM_children_ChildNodes_Traversal_Methods_JavaScript.js File
var a = document.getElementById("outer").children;
console.log(a);
document.getElementById("inner").children[1].style.background = "#ff0000";
var a2 = document.getElementById("inner").children[1];
console.log(a2);
document.getElementById("inner").children[3].style.background = "#ff0000";
var a3 = document.getElementById("inner").children[3];
console.log(a3);
var a4 = document.getElementById("inner").children[0].innerHTML;
console.log(a4);
//Main difference between "children" and "childNodes" is that "children" will return simple HTML Tags and "childNodes" will return TextNodes,ElementNodes,CommentNodes,Spaces,Enters also.
var a5 = document.getElementById("inner").childNodes;
console.log(a5);
var a6 = document.getElementById("inner").childNodes[1].innerHTML;
console.log(a6);.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment