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 `<div>`, `<p>`, `<button>`, and `<img>` becomes a node in this tree.

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 `<html>` element is the grandparent at the top. `<head>` and `<body>` 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

Introduction to the DOM document object

HTMLREAD ONLY