What is the DOM?

When a webpage loads in the browser, it doesn't just sit there as plain HTML. The browser turns that HTML into a structured model called the DOM — short for Document Object Model. This model lets JavaScript read, update, add, or remove anything on the page, like text, images, or buttons.

Understanding the DOM is the first step to making your websites interactive

What is the Document Object Model

The DOM is a programming interface that represents the page as a tree of objects. Every element in your HTML becomes a part of this tree — a node. For example, your <h1> or <p> tags become nodes that JavaScript can interact with.

So when you use JavaScript to change text on a button, or hide a section of the page, you’re actually updating the DOM.

How JavaScript "sees" the page

JavaScript doesn’t look at your HTML code directly. Instead, it sees the DOM — a live version of your page. You can select elements, change their content, or respond to events using methods like document.querySelector() or document.getElementById().

Here’s a quick example:

javascript
1
2
          const heading = document.querySelector('h1');
heading.textContent = 'New Title';

This updates the text inside the first <h1> on the page.

DOM tree structure

The DOM is shaped like a tree. At the top, there’s the document object, and underneath it are branches like <html>, <body>, and other elements. These are connected in a parent-child relationship.

For example:

javascript
1
2
3
4
5
6
          <html>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

In the DOM tree, <html> is the root. Inside it is <body>, and inside <body> are <h1> and <p>. JavaScript can move through this tree to find and change anything.

DOM vs HTML

It’s also helpful to know that the DOM is not the same as the HTML file you wrote. HTML is just the code, but the DOM is what the browser builds out of that code. If JavaScript changes the DOM, the actual HTML file doesn’t change — but the user sees the new version in real time.