LESSON 23

DOM Basics

Learning objective: Understand the DOM as the page's live structure.

Understand

The DOM is how JavaScript sees and changes the page.

The Document Object Model (DOM) is a live tree of all the elements on a page. JavaScript can read and change this tree, which instantly updates what the user sees. The document object is your entry point.

Analogy: The DOM is like a live blueprint of the page that updates the building as you edit it.

See It in Action

Reading the document:

console.log(document.title);
console.log(document.body);
How it works: document represents the whole page; document.title and document.body are parts of that live tree.

Try It Yourself

  1. Log document.title in the console.
  2. Log document.body.
  3. Change document.title and watch the tab update.

Quick Quiz

What is the DOM?

Challenge

Use JavaScript to change the page title from the console.

Success condition: The browser tab title updates when your code runs.