Selecting elements

Here's where JavaScript starts changing web pages. The DOM (Document Object Model) is the browser's live representation of your HTML — and JavaScript can reach into it to read and change the page. The first step is selecting the element you want to work with.

The DOM: your HTML as objects

When a browser loads your HTML, it builds a live model of it — the DOM — where every element is an object JavaScript can access and change. Changing the DOM changes what's on the screen, instantly. Selecting an element is how you grab hold of the part you want to work with.

querySelector: select one element

document.querySelector() finds the first element matching a CSS selector (the same selectors you learned in CSS — .class, #id, tag):

querySelector("#title") grabs the element with id="title"; querySelector(".info") grabs the first with class="info". Because it uses CSS selector syntax, everything you know about selectors applies. This is the modern, flexible way to select elements.

querySelectorAll: select many

querySelectorAll() returns all matching elements (as a list you can loop over):

querySelectorAll(".item") returns all elements with class="item", and you can loop over them with forEach to affect each. Use querySelector for one element, querySelectorAll for many.

Older selection methods (you'll see these too)

You'll encounter older selection methods in existing code:

• document.getElementById("title") — selects by id (no #).
• document.getElementsByClassName("item") — by class.

These still work, but querySelector/querySelectorAll are more flexible (they take any CSS selector) and are the modern preference. If you see getElementById, it's just an older way to do querySelector("#id").

The mistake beginners make

Selecting an element before it exists — if your <script> runs before the HTML element is loaded, querySelector returns null, and trying to use it crashes ("Cannot read property of null"). The fix: put your <script> at the bottom of the body (so the HTML loads first), which is why that's the convention. Also, forgetting the # for ids or . for classes in the selector string — it's CSS syntax, so the punctuation matters.

Your turn

Your turn

1. Use querySelector to select an element by id, class, and tag.
2. Use querySelectorAll to select several elements and loop over them.
3. Understand why scripts go at the bottom — so elements exist before you select them.

Key points

• The DOM is the browser's live object model of your HTML — change it and the page changes.
• document.querySelector(selector) selects the FIRST matching element, using CSS selector syntax.
• document.querySelectorAll(selector) selects ALL matching elements (loop with forEach).
• Put scripts at the bottom of the body so elements exist when you select them, or you get null.