What is the DOM?

Learn how the browser turns HTML into a tree and the document object.

What is the DOM?

When the browser loads an HTML page, it turns each tag into an object and arranges them in a tree. This structure is called the DOM (Document Object Model).

Thanks to the DOM, JavaScript can read and change elements on the page. At the root of the tree sits the document object; we reach every element through it.

Each tag becomes a node; for example <p> is an element node, and the text inside it is a text node.

The document object

The document object is the entry point to the DOM. It represents the whole page and exposes some useful properties.

document.title gives the page title (the content of the <title> tag). document.body returns the <body> element.

You do not need to call a function to reach them; just write document.title directly.

Exercise Print the title and the URL

Print the page title and URL separately with console.log. Use the document.title and document.URL properties.

Show example solution

Write document.title and document.URL on separate lines with console.log.
Example solution:
console.log(document.title);
console.log(document.URL);

Test yourself

What does the DOM represent?
- The browser's object model of the HTML page
- An HTTP request sent to the server
- A file containing CSS selectors
- An official JavaScript library
Show answer

The browser's object model of the HTML page — Correct! The DOM is the HTML represented as an object tree in the browser.

Print the page title

// Print the page title to the console
console.log(document.____);

Show answer

// Print the page title to the console
console.log(document.title);

Match the DOM terms

document

Root object of the whole page
element

Node representing an HTML tag
node

Any unit in the tree
attribute

A tag's attribute (e.g. class)

Next lesson: getElementById

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies