DOM firstChild and lastChild 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>firstChild lastChild DOM Traversal Methods JavaScript</title>
<link rel="stylesheet" href="css/DOM_firsrtChild_lastChild_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_firsrtChild_lastChild_Traversal_Methods_JavaScript.js"></script>
</body>
</html>
Below File is css/DOM_firstChild_lastChild_Traversal_Methods_JavaScript.css File
#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_firstChild_lastChild_Traversal_Methods_JavaScript.js File
//firstElementChild will return first Tag of given Id(Here, "inner")
var a = document.getElementById("inner").firstElementChild;
console.log(a);
var a2 = document.getElementById("inner").firstElementChild.innerHTML;
console.log(a2);
document.getElementById("inner").firstElementChild.style.background = "#ffff00";
var a3 = document.getElementById("inner").firstElementChild.innerHTML;
console.log(a3);
document.getElementById("outer").firstElementChild.style.background = "#ff0000";
var a4 = document.getElementById("outer").firstElementChild;
console.log(a4);
document.getElementById("inner").lastElementChild.style.background = "#ff0000";
var a5 = document.getElementById("inner").lastElementChild;
console.log(a5);
document.getElementById("outer").lastElementChild.style.background = "#ffff00";
var a6 = document.getElementById("outer").lastElementChild;
console.log(a6);
//Main difference between "firstChild" and "firstElementChild" is that "firstElementChild" will target first Element Tag and "firstChild" will target textNodes,spaces,Comment also.
var a7 = document.getElementById("inner").firstChild;
console.log(a7);
var a8 = document.getElementById("inner").lastChild;
console.log(a8);
var a9 = document.getElementById("child-C").firstChild;
console.log(a9);
var a10 = document.getElementById("child-C").lastChild;
console.log(a10);.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment