The Document Object Model (DOM) is a powerful programming interface for web documents. It represents the structure of a document as a tree of nodes, allowing you to manipulate the document's structure, style, and content using JavaScript. Let's dive into some practical examples to understand how to interact with the DOM.
Understanding the DOM
The DOM represents a web page as a tree of objects. Each element in the HTML document becomes a node in this tree, and you can use JavaScript to traverse, modify, and interact with these nodes.
Consider this basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM | Chai aur code</title>
</head>
<body style="background-color: #212121; color: #fff;">
<div class="parent">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
</div>
</body>
<script>
const parent = document.querySelector(".parent");
console.log(parent);
console.log(parent.children);
console.log(parent.children[1]);
console.log(parent.children[1].innerHTML);
for (let i = 0; i < parent.children.length; i++) {
console.log(parent.children[i].innerHTML);
}
parent.children[1].style.color = "orange";
console.log(parent.firstElementChild);
console.log(parent.lastElementChild);
const dayOne = document.querySelector(".day");
console.log(dayOne);
console.log(dayOne.parentElement);
console.log(dayOne.nextElementSibling);
console.log("NODES: ", parent.childNodes)
</script>
</html>
Now let's break it down and discuss each and every js code written here.
Selecting Elements
const parent = document.querySelector(".parent");
console.log(parent);
//outputs:
<div class="parent">
<div class="day">Monday</div>
<div class="day">Monday</div>
<div class="day">Monday</div>
<div class="day">Monday</div>
</div>
Accessing Child Elements
console.log(parent.children)
//outputs:
HTMLCollection(4) [div.day, div.day, div.day, div.day]
> 0: div.day
> 1: div.day
> 2: div.day
> 3: div.day
length: 4
[[Prototype]]: HTMLColection
Another one:
console.log(parent.children[1])
//outputs:
//<div class="day">Tuesday</div>
Another one:
console.log(parent.children[1].innerHTML);
//outputs:
//Tuesday
Looping Through Child Elements
for (let i = 0; i < parent.children.length; i++) {
console.log(parent.children[i].innerHTML);
}
//outputs:
//Monday
//Tuesday
//Wednesday
//Thursday
Modifying Style
parent.children[1].style.color = "orange";
Accessing First and Last Child Elements:
console.log(parent.firstElementChild);
//outputs: <div class="day">Monday</div>
console.log(parent.lastElementChild);
//outputs: <div class="day">Thursday</div>
Traversing the DOM
const dayOne = document.querySelector(".day");
console.log(dayOne);
//outputs: <div class="day">Monday</div>
console.log(dayOne.parentElement);
//outputs:
/*<div class="parent">
<div class="day">Monday</div>
<div class="day">Monday</div>
<div class="day">Monday</div>
<div class="day">Monday</div>
</div>*/
console.log(dayOne.nextElementSibling);
//outputs: <div class="day">Tuesday</div>
Understanding Nodes
console.log("NODES: ", parent.childNodes)
//outputs:
NodeList(9) [text, div.day, text, div.day, text, div.day, text, div.day, text]
0: text
1: div.day
2: text
3: div.day
4: text
5: div.day
6: text
7: div.day
8: text
length: 9
[[Prototype]]: NodeList