Document Object Model(DOM)
In order to make html page interactive, html document has to be represented in a way so that JavaScript can query and update it. To do this Document Object Model(DOM) is used.
When the browser receives a html page it constructs a DOM to represent it.
What is DOM?
Document object model(DOM) is a tree structure of a model. For example we have a html document:
<!DOCTYPE html>
<html>
<head>
<title>My Document Title</title>
</head>
<body>
<div>
<h1>The Heading</h1>
</div>
<div>
<p>The description.</p>
</div>
</body>
</html>In this html document we have a opening and closing html element tag <html></html> and inside this tag, we the <head></head> and <body></body> tags and inside those tags, we have more tags like h1, title, div. These elements are represented in a tree structure by DOM. For example:
Why DOM Is Used
As DOM keeps track of each element of a html page, we can access the elements more easily. And this helps to make the website more interactive. For example- if we have a streaming platform, when user hover over the movie title, the trailer starts playing. We can also use DOM object to dynamically add a new html page or add animation to load the html page.
So, simply put, DOM is used to easily manipulate html document.
