← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 18 of 26

JS DOM

Think of a family tree diagram, every person connects to their parents, children, and siblings in a clear, branching structure, and you can trace a path from any one person to any other through that tree. The DOM, or Document Object Model, is that same kind of tree, but for a webpage, every HTML element becomes a connected node, and JavaScript can walk through, read, and change that entire structure while the page is running. Every dynamic feature on cookiescursor.com, from updating a paragraph's text to adding a whole new section, ultimately comes down to JavaScript interacting with this DOM tree.

In this page:

  1. What Is the DOM
  2. The document Object
  3. The DOM Tree Structure
  4. Selecting Elements (Preview)
  5. DOM Manipulation Basics

What Is the DOM

The DOM is a live, in-memory tree representation of an HTML page, where every element, attribute, and piece of text becomes a connected node that JavaScript can read and manipulate directly.

Note: The DOM is not the same as the raw HTML file, it's a dynamic structure the browser builds and keeps updated as JavaScript changes the page.

Warning: Because the DOM can differ from the original HTML after JavaScript runs, viewing a page's source in some tools shows the original file, not the current live DOM.

Example: What Is the DOM

javascript 
console.log(document); // the live in-memory tree of the page

The document Object

document is the built-in object representing the entire loaded page, serving as the starting point for nearly every DOM operation, finding elements, reading properties, or creating new content.

Note: document.title and document.URL are quick, commonly used properties for reading basic information about the current page.

Warning: document only reflects the page it's running on, scripts cannot use it to reach into or modify a completely different page or origin.

Example: The document Object

javascript 
console.log(document.title);
console.log(document.body);

The DOM Tree Structure

The DOM organizes a page hierarchically, document at the very top, followed by html, then head and body, and every nested element continuing that parent-child relationship all the way down to individual text content.

Note: Understanding parent, child, and sibling relationships in the DOM tree helps a lot when navigating or manipulating nearby elements relative to one you already have.

Warning: Even whitespace and line breaks in your HTML can become their own text nodes in the DOM tree, which occasionally affects child counting.

Example: The DOM Tree Structure

javascript 
// document -> html -> head/body -> nested elements -> text
console.log(document.documentElement.tagName); // "HTML"

Selecting Elements (Preview)

Before you can manipulate an element, you first need to select it from the DOM, using methods like getElementById() or querySelector(), which are covered in full depth in the next chapter on DOM methods.

Note: Selecting an element doesn't change anything on the page by itself, it simply gives your script a reference to work with afterward.

Warning: Trying to select an element that doesn't exist yet, before it's been added to the page, returns null rather than the element you expected.

Example: Selecting Elements (Preview)

javascript 
const el = document.getElementById("demo"); // preview of the next chapter
console.log(el);

DOM Manipulation Basics

Once an element is selected, JavaScript can change its text, attributes, styles, or structure directly, and these changes appear instantly on the page, with no reload required, this is the foundation of interactive web pages.

Note: Even a single line of JavaScript, like changing textContent, is technically DOM manipulation, the same underlying mechanism behind far more complex interactive features.

Warning: DOM manipulation changes are visible instantly, but they exist only in the browser's memory, refreshing the page discards them unless they're saved somewhere.

Example: DOM Manipulation Basics

javascript 
document.body.style.color = "blue";
document.title = "Updated Title";
Common Mistakes
  1. Trying to access DOM elements before the page has finished loading them, resulting in null instead of the expected element.
  2. Confusing the DOM tree with the original HTML source, the DOM can be modified by JavaScript and no longer match the initial HTML exactly.
  3. Assuming every visible change requires reloading the page, DOM manipulation updates what's on screen instantly, without any reload.
Chapter Summary
  • The DOM represents an HTML page as a tree of connected node objects that JavaScript can read and modify.
  • The document object is the entry point for accessing and interacting with the entire DOM tree.
  • DOM manipulation, changing text, attributes, or structure through JavaScript, is what makes pages feel dynamic and interactive.
Browser Support

The DOM and the document object are core, universal web platform features supported identically in every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Async Parallel Next Lesson → JS DOM Navigation

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.