Traversing the DOM
While accessing the HTML tag in the JavaScript we have to use the document object.
document object is a global object, we can use it from anywhere in the HTML page.
document object provides the multiple properties and the methods that allow us to search the specific elements in the HTML page.
document.documentElement
We can get the topmost HTML tag using the document.documentElement property.
JavaScript Traversing the DOM
document.body
We can also get the BODY tag using the document.body.
document.body tag is a special property which points to the BODY tag of the HTML document, so by using the document.body we can access the BODY tag of the HTML page.
JavaScript Traversing the DOM
Please, be careful while using the document.body property in the HEAD tag, because the BODY tag can not loaded in the browser so it will return the null.
As you know first HEAD tag will load and after that BODY tag is load in the browser, If we use the document.body tag inside the HEAD tag than it always return the null.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
<script type="text/javascript">
alert("document.body from the HEAD tag: " + document.body);
// document.body from the HEAD tag: null
</script>
</head>
<body>
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Four</div>
<div>Five</div>
<script type="text/javascript">
alert("document.body from the BODY tag: " + document.body);
// document.body from the BODY tag: [object HTMLBodyElement]
</script>
</body>
</html>
Run the above code in your browser and you will get the value of the document.body from two different places.
In first alert the value of the document.body property will be null and in the second alert the value of the document.body property will be the HTMLBodyElement.
childNodes
The DOM keeps the references of the it’s all children into the childNodes property.
childNodes is array and it have the links of the every children.
childNodes also keeps the links of the white-space.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Four</div>
<div>Five</div>
<script type="text/javascript">
var bodyChilds = document.body.childNodes;
for (var i = 0; i < bodyChilds.length; i++) {
console.log(bodyChilds[i].nodeName);
}
</script>
</body>
</html>
// #text
// DIV
// #text
// DIV
// #text
// DIV
// #text
// DIV
// #text
// DIV
// #text
// SCRIPT
So as you see in above example, childNodes property also store the white-space, here the #text is the white-space, it is created because the we wrote one HTML tag per line. As you see the each and every DIV tag is created in new line also SCRIPT tag is created in the new line.
children
children property is the same as the childNodes property, but the difference is only that children property does not store the white-space or text node, it only store the elements nodes.
What it do is that it simply skip the text nodes and return the only elements nodes.
Let’s run the same above example with the children property and the output will be different.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Four</div>
<div>Five</div>
<script type="text/javascript">
var bodyChilds = document.body.children;
for (var i = 0; i < bodyChilds.length; i++) {
console.log(bodyChilds[i].nodeName);
}
</script>
</body>
</html>
// DIV
// SCRIPT
So you can use the childNodes or children property as per the your need.
Children Links
firstChild and lastChild
The DOM also store the link of the first child node into the firstChild property and also store the link of the last child node into the lastChild property.
firstChild property return the link of the first children.
lastChild property return the link of the last children.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body>
<div>First</div>
<div>Second</div>
<div>Third</div>
<script type="text/javascript">
var body = document.body;
console.log(body.firstChild.nodeName); // #text
console.log(body.lastChild.nodeName); // SCRIPT
</script>
</body>
</html>
As you seen above the firstChild property return the white-space or text node, because after the body tag we press the enter and so the new text node is created with the value white-space, and lastChild property return the SCRIPT, it means the last child is the SCRIPT tag.
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body><div>First</div><div>Second</div><div>Third</div>
<script type="text/javascript">
var body = document.body;
console.log(body.firstChild.nodeName); // DIV
console.log(body.lastChild.nodeName); // SCRIPT
</script>
</body>
</html>
As you seen in the above example after BODY tag I directly wrote the DIV tag, so the firstChild property is return the DIV and the lastChild property return the SCRIPT tag.
JavaScript Traversing the DOM
parentNode, previousSibling and nextSibling
parentNode property return the link of the parent node.
previousSibling return the link of the previous element or the left hand side element.
nextSibling return the link of the next element or the right hand side element.
JavaScript Traversing the DOM
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversing</title>
</head>
<body><div>First</div><div>Second</div><div>Third</div>
<script type="text/javascript">
var firstChild = document.body.firstChild;
var secondChild = firstChild.nextSibling;
var thirdChild = secondChild.nextSibling;
console.log(firstChild.innerText); // First
console.log(secondChild.innerText); // Second
console.log(thirdChild.innerText); // Third
secondChild = thirdChild.previousSibling;
firstChild = secondChild.previousSibling;
console.log(firstChild.innerText); // First
console.log(secondChild.innerText); // Second
var parent = firstChild.parentNode; // BODY tag
parent = secondChild.parentNode; // BODY tag
parent = thirdChild.parentNode; // BODY tag
</script>
</body>
</html>
If parent node only have the one element so the nextSibling and previousSibling will return the null.
All the properties like parentNode, nextSibling, previousSibling, firstChild and lastChild, childNodes, children are read only.
If we want to travel UP side in the DOM tree than we have to use the parentNode property.
If we want to travel down side in the DOM tree than we have to use the childNodes, children, firstChild and lastChild properties.
If we want to travel left or right side in the DOM tree than we have to use the previousSibling and nextSibling properties.