Selecting Elements
Meet the DOM — the browser's live representation of your HTML — and learn how to reach in and grab any element with JavaScript.
Step 1 of 5
The DOM: your HTML comes alive
When the browser loads an HTML file, it doesn't just display the text — it builds a live data structure called the **Document Object Model (DOM)**. The DOM is a tree of JavaScript objects, one for each HTML element. Every `
`, `
`, `
The DOM is live — if you change it with JavaScript, the page updates instantly. This is the foundation of every interactive website. The `document` object is your entry point — it represents the entire page and gives you methods to find and manipulate elements.
Think of it this way: The DOM is like a family tree of your HTML. The `` element is the grandparent at the top. `` and `` are its children. Every nested element is a child of its parent. `querySelector` is like pointing at a specific person in the tree and saying 'I want to talk to you.'
Web Standard
The DOM is a W3C standard that defines the structure of HTML and XML documents as a tree of objects. Every browser implements the same DOM API, so `document.querySelector()` works identically in Chrome, Firefox, Safari, and Edge.
Learn more on MDN
HTMLREAD ONLY