What is the DOM?

Checking access...

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page as a tree of objects that can be manipulated with JavaScript.

From HTML to DOM

When the browser loads an HTML file, it parses the markup and builds a DOM tree:

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>My Page</title>
5
</head>
6
<body>
7
  <h1>Hello!</h1>
8
  <p>This is a paragraph.</p>
9
</body>
10
</html>

Becomes this tree structure:

document
 └── html
      ├── head
      │    └── title
      │         └── "My Page"
      └── body
           ├── h1
           │    └── "Hello!"
           └── p
                └── "This is a paragraph."

Every element, attribute, and text node is represented as an object in this tree. Each object has properties (like textContent, style) and methods (like appendChild, remove).

The `document` Object

The document object is the entry point to the DOM. It represents the entire web page and is available globally in all browsers:

1
// Access the document title
2
console.log(document.title); // "My Page"
3

4
// Get the URL
5
console.log(document.URL); // "https://example.com/page"
6

7
// Get the page's body element
8
console.log(document.body); // <body>...</body>
9

10
// Get the head element
11
console.log(document.head); // <head>...</head>

DOM Tree Terminology

document
 └── html (root element)
      ├── head
      │    ├── title
      │    │    └── text node: "My Page"
      │    └── meta (attribute: charset="utf-8")
      └── body
           ├── h1
           │    └── text node: "Hello!"
           └── p (element node)
                └── text node: "This is a paragraph."

Root node: Always document
Element nodes: HTML tags (html, body, h1, p)
Text nodes: The text content inside elements
Attribute nodes: Attributes on elements (like class, id, src)
Parent/Child/Sibling: The tree follows family tree terminology
- html is the parent of head and body
- head and body are siblings
- head and body are children of html

Navigating the DOM Tree

Every node has properties that let you navigate the tree:

1
const body = document.body;
2

3
// Parent
4
console.log(body.parentNode); // <html>
5

6
// Children
7
console.log(body.children);   // HTMLCollection of child elements
8
console.log(body.childNodes); // NodeList including text nodes
9

10
// First/last child
11
console.log(body.firstElementChild); // first element child
12
console.log(body.lastElementChild);  // last element child
13

14
// Siblings
15
const h1 = document.querySelector("h1");
16
console.log(h1.nextElementSibling);  // <p> after the h1
17
console.log(h1.previousElementSibling); // null (h1 is first in body)

Node Types vs Element Properties

Property	Includes	Returns
`parentNode`	Any node type (including document)	Node
`parentElement`	Only element nodes	Element or null
`childNodes`	All node types (text, comment, element)	NodeList
`children`	Only element nodes	HTMLCollection (live)
`firstChild`	Any node type	Node
`firstElementChild`	Only elements	Element
`nextSibling`	Any node type	Node
`nextElementSibling`	Only elements	Element

Exploring the DOM in Console

Open your browser’s DevTools (F12 or Ctrl+Shift+I) and go to the Console tab:

1
// See the whole DOM as a tree
2
console.dir(document);
3

4
// Inspect specific elements
5
console.dir(document.body);
6

7
// Check node types
8
console.log(document.nodeType);       // 9 (DOCUMENT_NODE)
9
console.log(document.body.nodeType);  // 1 (ELEMENT_NODE)
10

11
// See the tag name
12
console.log(document.body.tagName);   // "BODY"

Node type constants:

Constant	Value	Represents
`ELEMENT_NODE`	1	HTML elements
`ATTRIBUTE_NODE`	2	Attributes
`TEXT_NODE`	3	Text content
`COMMENT_NODE`	8	HTML comments
`DOCUMENT_NODE`	9	The document

The DOM is Live

The DOM is live — changes in JavaScript immediately reflect in the browser:

1
// Type this in the console on any page:
2
document.title = "New Title!";
3
// Watch the browser tab title change instantly
4

5
document.body.style.backgroundColor = "lightblue";
6
// The page background changes immediately

Common Misconceptions

1. The DOM is not the HTML source

The DOM is a live representation that can differ from the original HTML source:

1
// JavaScript can add elements that never existed in the HTML
2
const div = document.createElement("div");
3
div.textContent = "I was added by JS!";
4
document.body.appendChild(div);

2. The DOM is not JavaScript

The DOM is a browser API, not part of JavaScript itself. JavaScript is just one language that can interact with it. (Python, Rust, and other languages can also manipulate the DOM when compiled to WebAssembly.)

3. `innerHTML` vs the DOM

1
// Setting innerHTML — browser re-parses HTML string
2
element.innerHTML = "<p>New paragraph</p>";
3

4
// DOM methods — more explicit and slightly faster
5
const p = document.createElement("p");
6
p.textContent = "New paragraph";
7
element.appendChild(p);

Quick Reference

Concept	Description
DOM	Tree representation of HTML
`document`	Entry point to the DOM
Element node	Represents an HTML tag
Text node	Text content inside elements
Parent/Child/Sibling	Tree relationship terms
Live DOM	Changes reflect immediately

Practice Exercises

Open any webpage in your browser console. Use document.body.children to list all direct children of the body. How many are there?
Navigate the DOM tree from document.body: find the first child element, then its next sibling, then the parent of that sibling. Which elements did you visit?
Change the page’s document.title to your name. Then inspect document.body.firstElementChild — what is it?