Mastering the Document Object Model
DOM Structure
The DOM Revealed
When a web browser loads an HTML document, it doesn't just display the text and images. It creates a live, interactive model of that page in its memory. This model is called the Document Object Model, or DOM for short.
Think of the DOM as a blueprint that the browser builds from your HTML code. It's not the code itself, but a representation of it that can be understood and manipulated by programming languages like JavaScript. This is what makes websites dynamic. When you click a button and something on the page changes without reloading, that's JavaScript interacting with the DOM.
The engine parses the HTML and breaks it into nodes, forming the DOM tree, a structured representation of all elements on the page.
A Tree of Nodes
The DOM organizes the document into a logical, tree-like structure. Every single part of an HTML document, from the main <html> tag to the smallest piece of text, becomes an object in this tree. These objects are called nodes.
This structure shows how all the elements are related to each other. It’s a lot like a family tree, where you have parents, children, and siblings. Let's look at a simple HTML file to see how this works.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p class="intro">Hello world!</p>
</body>
</html>
The browser takes this code and converts it into a DOM tree. Each tag and piece of text becomes a node, arranged in a hierarchy that mirrors the nesting in the HTML.
Nodes and Relationships
As the diagram shows, nodes come in different types. The most common are:
- Element nodes: These represent HTML tags, like
<body>,<h1>, or<p>. They form the main structure of the tree. - Text nodes: These represent the text content inside an element. For example, "Welcome" is a text node inside the
<h1>element. Text nodes are often the leaves of the tree, meaning they don't have children. - Attribute nodes: These represent the attributes of an element, like
class="intro"on the<p>tag. They aren't considered children of the element but are part of it.
These nodes are all connected, and we use family tree terms to describe their relationships.
| Relationship | Description | Example |
|---|---|---|
| Parent | A node that directly contains another node. | The <body> node is the parent of the <h1> node. |
| Child | A node that is directly contained by another. | The <h1> and <p> nodes are children of the <body> node. |
| Sibling | Nodes that share the same parent. | The <h1> and <p> nodes are siblings. |
| Ancestor | A node's parent, its parent's parent, and so on. | The <html> node is an ancestor of the <p> node. |
| Descendant | A node's children, its children's children, and so on. | The <h1> node is a descendant of the <html> node. |
Understanding this structure is the first step toward manipulating web pages. By navigating these relationships, a program can find any specific node and change its content, style, or position on the page.
What is the primary purpose of the Document Object Model (DOM)?
The DOM represents an HTML document as a logical, tree-like structure.