JSMasterJS
All tutorials
DOM

What is the DOM?

The Document Object Model — the browser's tree representation of your HTML.

1. Explanation

When a browser loads an HTML page it creates a tree of objects called the Document Object Model. Every tag becomes a Node. JavaScript can read and modify this tree to change content, styles and structure in real time. The global 'document' object is the entry point.

2. Example

Try it yourself
Console
Click Run to see output.

3. Expected output

output
(varies — try it in a browser console)

4. Common mistakes

  • ✗Running DOM code before the page is loaded — wrap in DOMContentLoaded or use 'defer'
  • ✗Confusing innerText (visible text) with innerHTML (raw HTML)
  • ✗Mutating the DOM in a loop without batching — slow

5. Practice questions

  1. Log document.body.innerHTML on any page
  2. Change document.body.style.color to red
  3. Count how many <a> tags exist with document.querySelectorAll
→ Try more practice problems