HTML DOM
DOM (Document Object Model)
The HTML DOM (Document Object Model) is a programming interface that represents an HTML page as a tree of objects. When a browser loads a page, it builds the DOM so that JavaScript can read and change the page's content, structure, and styles.
What is the DOM?
The DOM is a language-neutral, in-memory representation of a document. Every part of the page - the document itself, each element, each attribute, and each piece of text - becomes a node object. JavaScript treats the whole page as the global document object, which is the entry point into the DOM tree.
With the DOM, JavaScript can create new HTML elements, change every element and attribute on the page, restyle the CSS, remove existing elements, and react to events such as clicks and key presses. The DOM is what turns a static HTML file into an interactive page.
The DOM Tree
The DOM organizes the page as a hierarchical tree. The topmost node is the document node. Below it sits the root <html> element, which contains <head> and <body>, which in turn contain the rest of the page. Nested tags become child nodes, and tags at the same level are sibling nodes.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<p>Welcome!</p>
</body>
</html>The document node has one child (<html>). <html> has two children (<head> and <body>). <head> contains <title>, and <body> contains an <h1> and a <p>. The words "Hello" and "Welcome!" are themselves text nodes, children of their respective elements.
Types of Nodes
- Document node - the whole page, exposed to JavaScript as document.
- Element nodes - HTML tags such as <div>, <p>, and <a>.
- Attribute nodes - attributes on elements, such as id or href.
- Text nodes - the actual text inside elements.
- Comment nodes - HTML comments written as <!-- ... -->.
Example
This complete page uses JavaScript to read an element by its id and rewrite its content and colour when you click the button. Press Run and then the button to watch the DOM change live.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">Original text</h1>
<button onclick="update()">Change the DOM</button>
<script>
function update() {
const el = document.getElementById("demo");
el.innerHTML = "The DOM was updated!";
el.style.color = "teal";
}
</script>
</body>
</html>More Examples
JavaScript can also create brand-new nodes and add them to the tree. Here each click builds a fresh <li> element and appends it to the list.
<!DOCTYPE html>
<html>
<body>
<button onclick="addItem()">Add item</button>
<ul id="list"></ul>
<script>
let count = 0;
function addItem() {
count++;
const li = document.createElement("li");
li.textContent = "Item " + count;
document.getElementById("list").appendChild(li);
}
</script>
</body>
</html>The DOM is built by the browser, not written by you. Your HTML is only the starting blueprint - once the page loads, JavaScript and the DOM can change everything about it.
Key Takeaways
- The DOM is a tree of node objects that represents the loaded HTML page.
- document is the entry point to the tree for JavaScript.
- Finder methods such as getElementById let you locate nodes.
- Properties such as innerHTML, textContent, and style let you read and change nodes.
- createElement and appendChild let you add new nodes to the tree.