querySelector
Returns the first matching element.
Platform under construction
Selecting Elements
Selecting elements is how JavaScript finds the part of the page it needs to read or change.
const panel = document.querySelector("[data-panel]");
const buttons = panel.querySelectorAll("button");
buttons.forEach(button => button.disabled = false);
DOM & HTML Interaction
Good selectors are stable, scoped and easy to understand.
The most common selector methods are querySelector and querySelectorAll. They accept CSS selectors, which makes them flexible and familiar.
Selecting from document searches the whole page. Selecting from a container searches only inside that container, which reduces accidental matches.
A selector is a contract between HTML and JavaScript. If the class or attribute changes, the JavaScript may stop finding the element.
querySelectorAll
Returns all matching elements as a static NodeList.
getElementById
Fast direct lookup by id.
Scoped selection
Search from a known parent instead of the entire document.
Examples
DOM code should be scoped, safe and visible in the interface.
Scope selectors to a component root
const panel = document.querySelector("[data-panel]");
const button = panel.querySelector("[data-submit]");
Global selectors that may hit the wrong element
const button = document.querySelector("button");
// This might select the first button on the page, not your button.
Code patterns
Reusable examples for quick reference.
These patterns are the DOM moves you use constantly: select, read, change, create, navigate and render.
Data hook selector
Use data attributes for JavaScript behavior.
const saveButton = document.querySelector("[data-save]");
Scoped query
Find children inside a component root.
const panel = document.querySelector("[data-panel]");
const title = panel.querySelector("[data-title]");
Loop through matches
NodeList supports forEach in modern browsers.
document.querySelectorAll("[data-tab]").forEach(tab => {
tab.hidden = false;
});
Convert to array
Use Array.from when you need array methods.
const items = Array.from(document.querySelectorAll("li"));
const visible = items.filter(item => !item.hidden);
Rules that matter
Keep the DOM predictable.
DOM APIs are powerful because they affect the live page. Use them with stable hooks, clear state and safe text updates.
Use data attributes for behavior
Styling classes can change during redesigns.
Scope when possible
Start from the closest stable container.
Avoid vague selectors
button, div and .active are often too broad.
Check counts during debugging
querySelectorAll length reveals selector mistakes.
Do not overuse IDs
IDs must be unique and can make reuse harder.
Name hooks by purpose
data-submit is clearer than data-x.
Production thinking
A good DOM layer connects behavior to HTML without making the page fragile.
Why does this matter?
A weak selector creates invisible bugs: the code still runs, but it changes the wrong element.
Accessibility
Selectors should not depend on accessible text that may be translated or changed for clarity.
Production note
Production UI code should use stable hooks and scoped roots so pages can grow safely.
SEO note
Reliable selectors keep rendered navigation, headings and structured content from breaking during client-side updates.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add a third card and make sure it is selected.
- Change the selector to .panel and compare the result.
- Log cards.length before adding the click handler.
Practice assignment
Do this before moving to the next topic.
- Select a component root.
- Select child elements from that root.
- Loop through the selected elements.
Try it yourself
Select cards inside one panel
Self-check
Before you continue, prove that you understand Selecting Elements.
If you can explain the DOM operation and its failure path, you are ready to use it in real UI code.
- Can you explain querySelector?
- Can you explain querySelectorAll?
- Can you explain scoped selection?
- Can you explain why data attributes are useful?
- Can you explain why broad selectors are risky?
Senior audit upgrade
Extra production context for Selecting Elements.
Safe DOM default
Prefer textContent, createElement, templates and replaceChildren for normal UI rendering. Reach for innerHTML only when the markup is controlled and the risk is understood.
const item = document.createElement("li");
item.textContent = userInput;
list.replaceChildren(item);