Selecting & changing elements

Here's where JavaScript meets the page. The DOM (Document Object Model) is the browser's representation of your HTML as objects JavaScript can access and change. To make a page interactive, you first select elements, then change them. This is the foundation of all DOM work — and it's genuinely exciting: your code now controls the page.

What the DOM is

When the browser loads your HTML, it builds a live, in-memory model of it — the DOM — a tree of element objects. JavaScript can reach into this tree to read and change the page: alter text, styles, add or remove elements, respond to clicks. The DOM is the bridge between your JavaScript and what the user sees. Change the DOM, and the page updates instantly. Everything interactive works through it.

Selecting elements

First, you select the element you want to work with. The main tool is querySelector, which uses CSS selectors:

Click the button above — it selects the #title element and changes it. The selection tools:

• document.querySelector("selector") — the first element matching a CSS selector ("#title", ".msg", "p"). Your main tool.
• document.querySelectorAll("selector") — all matching elements (a list).
• document.getElementById("id") — an element by its id (a classic, still common).

Because querySelector uses CSS selectors (which you already know), selecting is intuitive: #id, .class, tag.

Changing content

Once you've selected an element, change its content:

• element.textContent — the text inside (safest for plain text).
• element.innerHTML — the HTML inside (lets you insert tags, but be careful with user input — it can be a security risk).

Setting textContent replaces the element's text instantly. This is how you update messages, results, counters — anything text-based — on the page.

Changing attributes

You can change element attributes too — element.src, element.href, etc. — by setting them directly (or with element.setAttribute("name", "value")). Click above to swap the image's src. This lets you dynamically change links, images, and other attributes in response to actions.

The mistake beginners make

Trying to select an element before it exists in the page — if your <script> runs before the HTML it targets, querySelector returns null (and null.textContent errors). Put scripts at the end of the body (or wait for the page to load) so elements exist. Also, forgetting the #/. in selectors (querySelector("title") looks for a <title> tag, not #title). And confusing textContent (safe, plain text) with innerHTML (HTML, riskier). Select after elements exist, use proper CSS selectors, and prefer textContent for plain text.

Your turn

Your turn

1. Understand the DOM as the browser's live, changeable object model of your HTML.
2. Select elements with querySelector (CSS selectors), querySelectorAll, and getElementById.
3. Change content with textContent (and innerHTML) and attributes (element.src, etc.) — updating the page instantly.

Key points

• The DOM is the browser's live object model of your HTML — JavaScript reads and changes it to make pages interactive.
• Select elements with document.querySelector('cssSelector') (first match) or querySelectorAll (all) — using CSS selector syntax.
• Change content with element.textContent (plain text, safe) or innerHTML (HTML, riskier); change attributes like element.src directly.
• Select elements only after they exist (put scripts at the end of the body) — otherwise querySelector returns null.