JavaScript: Introduction to the DOM

Last updated: 2026-10-13

The DOM is the only bridge between JavaScript and web pages. Without the DOM, JS would be nothing more than a pure computation language. With the DOM, JS can "see" pages, modify pages, and bring them to life.

1. The DOM Tree and document Object

(1) What Is the DOM?

DOM stands for Document Object Model. When a browser loads HTML, it doesn't store it as plain text — it translates it into an object tree. Each HTML tag becomes an object (called a node), and the nesting relationships between tags become parent-child relationships in the tree.

Think of the DOM as an upside-down tree: at the very top is the root (document), branching down into limbs (html, head, body), and further down into leaves (div, p, span...).

(2) DOM Tree Structure

The DOM tree of a simple HTML page looks roughly like this:

HTML

document
  └── html
       ├── head
       │    ├── meta
       │    └── title
       └── body
            ├── h1
            ├── p
            └── div
                 └── span

document is the root node of the DOM tree and the entry point for JS to access the DOM
html is the sole child element of document (the document element)
head and body are the two child elements of html
From there, nesting continues layer by layer to form the complete tree

(3) Node Types

There are three core node types in the DOM:

Node Type	Description	nodeType Value
Element node	An HTML tag, e.g. `p`, `div`	1
Text node	Text content inside a tag	3
Attribute node	A tag's attribute, e.g. `class`, `id`	2 (deprecated for general use)

HTML

<p class="intro">Hello World</p>

In this single line: <p> is an element node, class="intro" is an attribute node, and Hello World is a text node. In everyday development, element nodes are what you'll work with the most.

(4) The document Object

document is the entry point to the DOM — the browser provides this global object automatically. Through it you can:

Access page elements: document.getElementById(), document.querySelector()
Create new elements: document.createElement()
Read and write page content: document.title, document.body
Listen for page events: document.addEventListener()

(5) What the DOM Does

JS itself cannot "see" a web page — it can only compute. The DOM provides the "eyes" and "hands":

Read: Get text, attributes, and styles from the page
Modify: Change text content, attribute values, and CSS styles
Add: Create new elements and insert them into the page
Remove: Remove elements from the page
Listen: Respond to user clicks, input, and other interactions

Without the DOM, JS and HTML would be two completely separate things. The DOM connects them.

❓ FAQ

Q Is the DOM part of JavaScript?

A No. The DOM is a standard defined by the W3C. JavaScript merely provides APIs to interact with it. Node.js has no DOM because it isn't a browser environment. Confusing DOM and JS is a common beginner misconception.

Q Why are there empty text nodes in childNodes?

A Line breaks and indentation in HTML are parsed as text nodes in the DOM. For example, the whitespace between two tags becomes a text node (containing a newline character). If you only want element nodes, use children instead of childNodes.

Q Does modifying the DOM affect page performance?

A Yes. Every DOM modification can trigger a browser reflow and repaint. Frequent DOM manipulation is a performance killer. Best practice: build all your changes in memory first, then write to the DOM in one go.

📖 Summary

The DOM is a tree representation of HTML; each tag is a DOM node
document is the DOM entry point; document.getElementById() finds elements by ID
document.querySelector() uses CSS selectors for the first match; querySelectorAll for all
Node types: element nodes (HTML tags), text nodes (content), attribute nodes (tag attributes)
Core DOM operations: find nodes, read attributes, modify content, add/remove children

📝 Exercises

Open the browser DevTools (F12), type console.dir(document) in the Console, and explore the document object's properties and methods. List 5 that you recognize or find interesting.
Write code that gets the body element of the current page, prints its childElementCount (number of child elements), then uses children to loop through all child elements and print each one's tag name.
Explain the difference between "element nodes" and "text nodes". Given <div>Hello <b>World</b></div>, draw its node tree structure and label the type of each node.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us