Sign in
Log inSign up

What is Document Object Model (DOM) and DOM Manipulation?

Rahul Mistry's photo
Rahul Mistry
·Aug 16, 2021·

3 min read

Hello Everyoneđź‘‹, You might have gone through many web apps wherein, we click on the hamburger icon which is generally located at the top right or left corner of the navigation bar, it opens up a side menu or a dropdown menu.

Webp.net-gifmaker.gif

If you have some basic idea about how web app works then you might be knowing that this can be done using JavaScript. There are many cool things we can do using JavaScript to make web pages interactive. JavaScript is a scripting language that creates dynamic web pages and also adds interactivity to the page. But, how does JavaScript controls the HTML elements which are written in a HTML file? Well, there comes the middle man Document Object Model to rescue.

What is DOM?

Document Object Model is an API for manipulating HTML and XML. The Browser acts as a parser for an HTML document that converts each HTML tag that we include in the HTML document into an Objects.

Untitled presentation.png

Document Object Model is structured like a tree, where the root is a document and html element is the direct child of the document, which is also known as the document element. Every branch of the tree is represented as a node. An element is a node(branch) in Object model(tree). 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello World </h1>
    <div>
        <p>This is a blog</p>
    </div>
</body>
</html>

Untitled presentation (1).png

Explanation:

Here is a simple code snippet and the tree representation of that code snippet in DOM. The above code is having < html > as a document element. head and body are the branches. title and h1, div are sub-branches of those branches. There's one thing to note here. We can see in the above tree representation that This is a blog is a whole new node. Even though It is the content of the element. In DOM, the content inside every element is a separate branch/node.

What is DOM Manipulation?

DOM manipulation is simply creating, editing, styling, and deleting the element nodes in DOM using JavaScript. As mentioned earlier, document is always at the top of the hierarchy of DOM. In DOM, document is a object which encloses the entire html document. Enough of theory, let's jump into an exercise.

Problem: Edit the h1 element content from "Hello World " to "Hi, I am using JS" dynamically

image.png

image.png

Approach:
  1. Grab the h1 element node by using id/class.
  2. Use textContent property on the node.
  3. Overwrite the textContent property value with "Hi, I am using JS".
Output:

image.png

Explanation:

In first expression, we have used document object's getElementByID method() to fetch the h1 element node and saved it in heading variable. ID is like a tag for an element. It becomes easier to grab a particular element for doing DOM manipulation on it if we give it some name/tag. textContent is a property which is used to show or edit the element's content. In second expression, heading.textContent shows the content value which is inside h1 element. Currently, the content value is Hello World. In last expression, the heading content value is replaced with Hi, I am using JS by using replacing the value of heading.textContent.

Conclusion

Document Object Model is the essential bridge between HTML document and Javascript. Without it we couldn't have improved the interactivity of web apps.

I hope you enjoyed and understood this article. Feel free to connect with me on Twitter(@rahulmistry751).