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)