JavascriptHow-ToBeginner · 3 min read

How to Select Element by Class in JavaScript Easily

To select elements by class in JavaScript, use document.getElementsByClassName('className') to get all matching elements or document.querySelector('.className') to get the first matching element. These methods let you access elements with the specified class for further manipulation.

📐

Syntax

There are two common ways to select elements by class in JavaScript:

document.getElementsByClassName('className'): Returns a live HTMLCollection of all elements with the given class.
document.querySelector('.className'): Returns the first element that matches the class selector.

Note the dot . before the class name in querySelector, which is required for class selectors.

javascript

const elements = document.getElementsByClassName('my-class');
const firstElement = document.querySelector('.my-class');

💻

Example

This example shows how to select all elements with the class highlight and change their background color. It also selects the first element with that class and changes its text.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Select by Class Example</title>
</head>
<body>
  <p class="highlight">First paragraph.</p>
  <p class="highlight">Second paragraph.</p>
  <p>Third paragraph without class.</p>

  <script>
    // Select all elements with class 'highlight'
    const elements = document.getElementsByClassName('highlight');
    for (let el of elements) {
      el.style.backgroundColor = 'yellow';
    }

    // Select the first element with class 'highlight'
    const first = document.querySelector('.highlight');
    first.textContent = 'This is the first highlighted paragraph.';
  </script>
</body>
</html>

Output

The first two paragraphs have yellow background; the first paragraph's text changes to 'This is the first highlighted paragraph.'

⚠️

Common Pitfalls

Common mistakes when selecting elements by class include:

Forgetting the dot . before the class name in querySelector or querySelectorAll. Without it, the selector looks for tags, not classes.
Using getElementsByClassName but expecting an array. It returns an HTMLCollection, which is array-like but not an array.
Trying to use querySelector to get multiple elements. It only returns the first match; use querySelectorAll for all matches.

javascript

/* Wrong: missing dot for class selector */
const wrong = document.querySelector('highlight'); // Looks for <highlight> tag, returns null

/* Right: include dot for class selector */
const right = document.querySelector('.highlight');

📊

Quick Reference

Method	Description	Returns
document.getElementsByClassName('className')	Selects all elements with the class	HTMLCollection (live list)
document.querySelector('.className')	Selects the first element with the class	Element or null
document.querySelectorAll('.className')	Selects all elements with the class	NodeList (static list)

✅

Key Takeaways

Use document.getElementsByClassName('className') to get all elements with a class as a live collection.

Use document.querySelector('.className') to get the first element with that class; remember the dot before the class name.

For multiple elements with a class, document.querySelectorAll('.className') returns a static list.

Always include the dot prefix when using querySelector or querySelectorAll for class selectors.

HTMLCollection from getElementsByClassName is not a true array but can be looped with for...of.