Frontend Master

JavaScript Curriculum

What is the DOM
+50 XP

What is the DOM

easy
~25 min·50 XP

The coffee shop HTML and CSS look great. But every time someone wants a menu update, you have to edit the HTML file. The DOM lets JavaScript update the page dynamically — no file edits needed.

What is the DOM

When a browser loads an HTML file, it doesn't just display it — it parses every tag into a tree of JavaScript objects called the Document Object Model (DOM). Each tag becomes a node you can read, modify, and delete with JavaScript.

The DOM Tree

The DOM is a tree. Every element is a node — nested inside its parent, containing its own children. Click nodes below to see how to access each one from JavaScript:

DOM tree — click any element to see its selectors

Click any element in the tree to see how to select it with JavaScript.

</domtreevisualizer2>
ℹ️The DOM is live
Unlike your HTML file on disk, the DOM updates in real time. When JavaScript adds or removes an element, the page changes immediately — no page reload needed. This is the foundation of every interactive website.

Node Types

Not everything in the DOM is an element. Text, comments, and the document root itself are all different node types:

<nodetypeexplorer></nodetypeexplorer>

💡You mostly work with Element nodes
In practice, 95% of your DOM work is with Element nodes (nodeType 1). Text nodes matter when working with raw text. DocumentFragment is worth knowing for performance — batch DOM insertions off-screen before attaching them all at once.

Browser DevTools — Your DOM Playground

DevTools is where you explore, debug, and experiment with the DOM live in the browser:

devtools-guide
🔍 ElementsF12 / Ctrl+Shift+I

Inspect and edit the live DOM tree. Click any element, see its HTML, edit attributes, add/remove classes in real time. Right-click any element on page → Inspect jumps straight here.

Pro tips
  • ›Hover over a node to highlight it on the page
  • ›Double-click attribute values to edit them live
  • ›Press H to toggle visibility of the selected element
  • ›Right-click a node → Break on → subtree modifications to debug DOM changes
Example usage
// In Console, inspect the selected element:
$0          // currently selected element in Elements panel
$0.style.background = 'red'  // live edit
$0.textContent  // read text
$0.getAttribute('class')
⚠️DevTools changes are temporary
Any DOM changes you make in DevTools are lost on page refresh. They only affect the in-memory DOM, not your HTML file. Use DevTools for experimenting — write permanent changes in your JS files.

Your Challenge

Open DevTools on any page. In the Console, run: document.querySelector('h1').textContent to read the heading. Then set it: document.querySelector('h1').textContent = 'Hello DOM'. Watch it change live.

Challenge

Open the browser console on any webpage. Use document.querySelector to select the main heading, read its textContent, then change it to something new. Log document.body.children.length to count its direct children.

domdocumentnodeselementstreedevtoolsquerySelectordocument.bodydocument.headnodeType
What is the DOM | Nexus Learn