DOM - Document Object Model
I am a budding developer who likes to share my learnings through blogs.
Introduction - DOM
In this blog we are going to look into DOM i.e. Document Object Model. DOM is used to structure your HTML document and how it enables JavaScript to change the element properties like attributes, validations etc.
What is DOM ?
Let's go through a definition on MDN
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
So we can understand that it acts as an interface between our web document i.e HTML and programming languages. Through programming languages like JavaScript we can modify the structure of the document. But how do we do that? Let's see...
Understanding Basics
We know that whenever we create a website it has 3 basic componets to it -
- HTML - This is a Markup language which is used to structure our document. This is done through elements and tags. It is not a general purpose programming language where we can use loops, functions etc., or in short build logic.
- CSS - This is used to style our webpage, gets direct reference to HTML tags to design them or uses classes and id's to refer some specific tags. again in short adds design dynamics to webpages.
- JAVASCRIPT - Then we have JavaScript ; this is where we can add functionality to our website i.e we can add events, validations etc.
Now the main part is that we use JavaScript to interact with our HTML document. But, how do we do that ? How is a JavaScript file able to interact with the HTML elements to provide various functionality to our webpages? Let's dive further into this.
Understanding DOM
Consider the following HTML Document -
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Main Heading</h1>
<p>Some information</p>
<div class="outerDiv">
some more information links etc.
<div class="innerDiv">Link to my Blogs
<a id="link" href="https://ritikkapoor.hashnode.dev/">This is the link</a>
</div>
</div>
</body>
</html>
This is how a basic HTML Document looks like. I know there is nothing new. But if we observe carefully we can segregate the parts of a HTML document. As you may notice on a broad classification - we have the HTML document, it is divided into two parts - head and body ; where head contains the title and meta tags and the body contains the rest of the structure of the document.
So when this HTML document is loaded into the browser a tree like structure is created which is know as the Document Object Model or the DOM.
Given below is the DOM view of the above HTML document.
you can get your own dom view here
In this model all the elements of the HTML document i.e. the tags are considered as objects.Yes these are similar to the objects we learn about in Object Oriented Programming. And these objects combine together to form a hierarchy. This hierarchical structure is your DOM.
The above image will give a much clear view of hierarchy in the DOM.
Need of DOM
Now let's get back to our previous question i.e. How is a JavaScript file able to interact with the HTML document ?
The answer is it cannot, at least not directly. JavaScript is not able to interpret the HTML document but it can interpret the DOM. This also answers our question ; Why do we need a DOM ?
In simpler terms, we can say that a HTML Document is converted into an object model so that programming languages like JavaScript can understand and interact with it. So through DOM, JavaScript is able to access these DOM objects and manipulate it's attributes.
JS & DOM
JavaScript looks at DOM in terms of nodes.
There are basically 10-12 types of nodes. But on a broader level we can consider three different types of nodes:
- Element Node - all your tags in html are element nodes
- Attribute Node - classes and id's are the attribute nodes
- Text Node - the content inside the tags are know as text nodes
Using these DOM objects as nodes JavaScirpt or any other programming language for that matter is able to access and modify the structure of HTML document and provide functionality to it.
Parting Thoughts
I hope this would have brought some clarity in terms What is DOM ? and Why it is needed ?
For more on DOM you may follow these -
For more such blogs follow me here and do comment below on what should be my next blog.
Till then keep trying keep learning.
