# 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: 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: 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: 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.