How to Select an Element in JavaScript

Use DOM selectors when your JavaScript needs to read, update, hide, move, or attach events to HTML elements. The cleanest default for most tasks is querySelector().

What you’ll build or solve

You’ll learn how to select an element in JavaScript using the most common DOM methods. You’ll also know when to use ID, class, and multiple-element selectors.

When this approach works best

This approach is the right choice when JavaScript needs to interact with HTML already rendered on the page.

Common real-world scenarios include:

• Updating text
• Changing styles
• Attaching click events
• Reading input values
• Toggling UI sections

This is a bad idea when the element does not exist yet because the script runs too early. In that case, move the script below the HTML or wait for DOM load.

Prerequisites

You only need:

• A basic HTML page
• A JavaScript file or <script> tag
• Basic HTML and JavaScript knowledge

Step-by-step instructions

Step 1: Select one element with querySelector()

Use querySelector() for the first matching element.

<h1 class="title">Welcome</h1>

<script>
  const title = document.querySelector(".title");
  console.log(title);
</script>

You can target IDs, classes, or element tags.

const button = document.querySelector("#submit-btn");
const paragraph = document.querySelector("p");

Use querySelectorAll() when multiple matches are needed.

const cards = document.querySelectorAll(".card");

What to look for:

• querySelector() returns the first match
• Use CSS selector syntax inside the string
• # targets IDs
• . targets classes
• querySelectorAll() returns multiple matches

Examples you can copy

Select by ID

const form = document.querySelector("#signup-form");

Select by class

const banner = document.querySelector(".promo-banner");

Select all buttons

const buttons = document.querySelectorAll("button");

Common mistakes and how to fix them

Mistake 1: Forgetting CSS selector syntax

What the reader might do:

const title = document.querySelector("title");

Why it breaks: this selects the <title> tag, not a class named title.

Corrected approach:

const title = document.querySelector(".title");

Mistake 2: Running the script before the HTML exists

What the reader might do:

<script>
  const button = document.querySelector(".cta");
</script>

<button class="cta">Start</button>

Why it breaks: the selector runs before the button is parsed.

Corrected approach:

Move the script below the HTML or use DOMContentLoaded.

Mistake 3: Expecting querySelectorAll() to return one element

What the reader might do:

const cards = document.querySelectorAll(".card");
cards.textContent = "Updated";

Why it breaks: this returns a NodeList, not a single element.

Corrected approach:

cards.forEach(card => {
  card.textContent = "Updated";
});

Troubleshooting

If the result is null, confirm the selector matches the HTML.

If the script runs too early, move it below the target element.

If multiple elements are returned, loop through the NodeList.

If the wrong element is selected, recheck # vs . syntax.

Quick recap

• Use querySelector() for one element
• Use CSS selector syntax
• Use querySelectorAll() for multiple matches
• Run the script after the HTML exists
• Check # for IDs and . for classes