What is "The Document Object Model" about?

An HTML file is just text. The DOM is the living structure that JavaScript actually interacts with.

What topics does "The Document Object Model" cover?

This article covers: javascript dom, document object model, html tree, document object.

The Document Object Model

The Essentials

The DOM: The Document Object Model. It is how JavaScript represents the HTML of a web page internally.
The Tree Structure: HTML is parsed into a tree of elements. The <html> tag is the root, with <head> and <body> as its main branches.
Containers: Elements like <div> act as empty boxes or containers to group other elements together.
The document Object: In the browser console, typing document gives you access to the entire parsed representation of the current page.

When you write HTML, you are essentially writing a text file. But when a browser loads that text file, it does not just display the text. It parses it. It reads through the tags, the attributes, and the content, and it builds a mental model of how all those pieces fit together.

For JavaScript to interact with that page, it needs to access that same mental model. That model is called the Document Object Model, or the DOM.

The HTML Tree

If you open the inspector in your browser (right-click and select "Inspect"), you will see what looks like your HTML file. But you are actually looking at the DOM: the live representation of the page at that exact moment.

To understand how JavaScript sees this, it helps to visualize it as a tree.

At the very top is the root element. In an HTML document, this is the <html> tag. You can think of it as the trunk of the tree. Everything else on the page branches out from here.

Directly branching off the <html> tag are usually two main children:

The <head>: This contains metadata, links to stylesheets, and information about the page that is usually not visible to the user.
The <body>: This is where the actual content lives. Everything the user sees and interacts with is inside the body.

Drilling Down the Tree

If you look inside the <body>, you find more branches. You might have a <header>, a <main> section, or a <footer>.

One of the most common elements you will see is the <div>. A <div> is basically an empty cardboard box. It is a general-purpose container used to divide the page into sections or group related elements together so they can be styled or moved as a single unit. You rarely see an empty <div> on its own; it almost always has children.

JavaScript parses this structure out. It understands that the <div> is a child of the <body>, and that a paragraph inside the <div> is a child of the <div>.