jsschools
JavaScript DOM Intro

The Bridge Between JavaScript and the Page

JavaScript DOM Intro

The DOM is the live tree of nodes that represents an HTML page. JavaScript reads and changes it through the `document` global.

4 min read Level 2/5 #DOM#document#browser
What you'll learn
  • Understand what the DOM is and why it exists
  • Recognize node types — document, element, text
  • Read your first property off the document

When your browser loads an HTML page, it parses the markup into a tree of objects — one node per tag, one node per chunk of text. That tree is the DOM (Document Object Model). JavaScript reads and changes it through the document global.

The Tree

This HTML…

<!doctype html>
<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

…becomes this tree:

document
└── <html>
    └── <body>
        ├── <h1>  "Hello"
        └── <p>   "World"

Each node is a real JavaScript object. You can read its properties, walk to its parent or children, change its text, swap its attributes, or remove it.

The document Global

document is the root. Every page has exactly one.

Reading from the document script.js 
console.log(document.title);              // the page's <title>
console.log(document.body.tagName);       // "BODY"
console.log(document.documentElement.tagName); // "HTML"
console.log(document.URL);                 // the page URL
▶ Preview: console

Node Types

The most common ones you’ll touch:

TypeWhat it is
DocumentThe root — document
ElementAny HTML tag — <div>, <p>, <h1>…
TextThe actual text inside an element
Comment<!-- ... -->
DocumentFragmentAn in-memory mini-tree, useful for batching

Most of the time you’ll work with elements. Reading .textContent on an element gives you the combined text of all its descendants.

Element vs text content script.js 
// assume <h1 id="t">Hello <em>there</em></h1>
const h = document.getElementById("t");
console.log(h.tagName);       // "H1"
console.log(h.textContent);   // "Hello there"
console.log(h.children.length); // 1 — the <em>
▶ Preview: console

The DOM Is Live

This is the part that trips people up: when you mutate the DOM, the browser re-renders. Setting el.textContent = "Hi" immediately updates the screen. The tree is the source of truth — there’s no separate render step you need to call.

Up Next

Before you can change a node, you have to find it. Selectors are how.

JavaScript DOM Selection →