Josh Writes

Small boy with big dreams.

Introduction to DOM and the basics of DOM Manipulation.

Hey everyone, In this blog let us discuss Document Object Model or easily known as “DOM”. The Document Object Model (DOM) is really one of the most important things you need to learn in web development, however it can seem slightly confusing at first. Even I didn’t understand it in the first place!

That is why I have tried to explain DOM as perfectly as possible below. I hope you understand the topic.

Now, let’s break this down step by step.

1. The Webpage as a Structured Tree

When you load a webpage, the browser reads the HTML code and constructs a visual representation of it. But behind the scenes, it also creates a structured tree-like model of the page. This is what we refer to as the DOM.

For example, here’s a very basic HTML page.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The browser sees this like a tree of elements, imagine “html” to be the trunk and the rest branches that divide itself into even more branches. That’s to put it simply, how DOM sees a HTML page.:

Document
├── html
│   ├── head
│   │   └── title ("My Page")
│   └── body
│       ├── h1 ("Hello, World!")
│       └── p ("This is a paragraph.")

Each HTML tag (like <h1>, <p>, and <body>) becomes a “node” in this tree structure.

2. Why is the DOM Useful?

Since the browser builds this structured representation, JavaScript can access and modify it. This allows us to:

  • Change the text inside elements
  • Modify styles like colors and sizes
  • Create new elements dynamically
  • Remove elements from the page
  • React to user interactions like clicks and typing

Without the DOM, a webpage would be static, meaning nothing could change after it loads. However, now with DOM Manipulation, we can make websites look a lot more fun.

3. How JavaScript Uses the DOM

JavaScript provides built-in methods to interact with the DOM. Let’s look at some basic operations:

Selecting an Element

If you want to change an element on a webpage, you first need to select it. The most common way is by using getElementById.

<p id="message">Hello, World!</p>


const paragraph = document.getElementById("message");
console.log(paragraph);

This retrieves the paragraph element so we can modify it.

Changing Content

We can update the text inside an element dynamically.

paragraph.innerText = "Welcome to JavaScript!";

Now, the text inside <p> changes from “Hello, World!” to “Welcome to JavaScript!” without reloading the page.

Modifying Styles

We can also change styles like color and font size using JavaScript.

paragraph.style.color = "blue";
paragraph.style.fontSize = "20px";

This turns the text blue and increases its size.

4. The DOM is a Live Representation

One important thing to understand is that the DOM is best described as a live representation of the webpage. This means that if JavaScript modifies the DOM, those changes immediately reflect on the page, however JavaScript does not modify the HTML itself.

For example, if a button is clicked and JavaScript updates the text, the new text appears instantly without refreshing the page and the HTML still remains as it was.

5. The DOM vs. HTML

A common point of confusion is the difference between HTML and the DOM.

  • HTML is the original code written in a file (.html).
  • The DOM is what the browser creates based on that HTML.
  • JavaScript interacts with the DOM, not the original HTML file.

For example, if we write this in our HTML:

<p id="info">Original text</p>

And later change it with JavaScript:

document.getElementById("info").innerText = "Updated text";

The HTML file itself remains unchanged, but the displayed webpage updates.

6. Conclusion

The DOM is what allows JavaScript to make websites interactive and dynamic. It provides a structured way to access and manipulate elements on a webpage.

To summarize:

  • The DOM is a tree representation of an HTML document.
  • JavaScript can select, modify, add, or remove elements in the DOM.
  • The DOM updates in real time when changes are made with JavaScript.

Mastering the DOM is the key to creating interactive web applications. It is the foundation for animations, dynamic content, and event handling on modern websites. Now I hope this was able to explain DOM easily to you. Thanks for reading and, most of all — Happy Coding!