DOM Element Selectors in JavaScript

Introduction

When building interactive websites, JavaScript needs a way to access HTML elements. This is where DOM Element Selectors come in.

The DOM (Document Object Model) represents your HTML page as a tree of objects. JavaScript uses selectors to find these objects and modify their content, style, or behavior.

---

What is the DOM?

The Document Object Model (DOM) is a programming interface that represents an HTML document as objects.

JavaScript can use the DOM to:

• Change text
• Change styles
• Add or remove elements
• Handle user actions
• Update web pages without reloading

Example HTML:

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

JavaScript can access this element and change it.

---

1. getElementById()

This selector finds an element using its id.

Syntax

document.getElementById("idName");

Example

<h1 id="title">Hello World</h1>

<script>
let heading = document.getElementById("title");

heading.innerText = "Welcome to JavaScript";
</script>

Output

Before:

Hello World

After:

Welcome to JavaScript

When to use

Use this method when an element has a unique ID.

---

2. getElementsByClassName()

This selector finds all elements with the same class name.

Syntax

document.getElementsByClassName("className");

Example

<p class="text">Apple</p>
<p class="text">Banana</p>
<p class="text">Orange</p>

<script>
let items = document.getElementsByClassName("text");

items[0].style.color = "red";
</script>

Important

• Returns an HTMLCollection
• Multiple elements can have the same class
• Access elements using the index

Example:

items[1]
items[2]

---

3. getElementsByTagName()

This selector finds elements using their HTML tag.

Syntax

document.getElementsByTagName("tagName");

Example

<h2>Heading One</h2>
<h2>Heading Two</h2>

<script>
let headings = document.getElementsByTagName("h2");

headings[1].style.color = "blue";
</script>

Important

• Returns an HTMLCollection
• Selects every matching tag

---

4. querySelector()

This selector returns the first matching element.

It can select using:

• ID
• Class
• Tag
• CSS Selector

Select by ID

document.querySelector("#title");

Select by Class

document.querySelector(".text");

Select by Tag

document.querySelector("p");

Example

<p class="text">First Paragraph</p>
<p class="text">Second Paragraph</p>

<script>
let para = document.querySelector(".text");

para.style.color = "green";
</script>

Only the first paragraph changes.

---

5. querySelectorAll()

This selector returns all matching elements.

Syntax

document.querySelectorAll("selector");

Example

<p class="text">Apple</p>
<p class="text">Banana</p>
<p class="text">Orange</p>

<script>
let fruits = document.querySelectorAll(".text");

fruits.forEach(function(item) {
    item.style.color = "purple";
});
</script>

Output

All paragraphs become purple.

Important

Returns a NodeList, which supports methods like forEach().

---

Difference Between querySelector() and querySelectorAll()

querySelector()	querySelectorAll()
Returns the first matching element	Returns all matching elements
Returns a single element	Returns a NodeList
No index needed	Access elements using an index or forEach()

---

Difference Between HTMLCollection and NodeList

HTMLCollection	NodeList
Returned by getElementsByClassName()	Returned by querySelectorAll()
Live collection	Static collection
Does not directly support forEach()	Supports forEach()

---

Which Selector Should You Use?

Situation	Best Selector
Select by ID	getElementById()
Select multiple classes	getElementsByClassName()
Select by tag	getElementsByTagName()
Select the first matching element	querySelector()
Select all matching elements	querySelectorAll()

---

Summary

DOM element selectors help JavaScript find HTML elements and make web pages interactive.

The most commonly used selectors are:

• getElementById() – Selects one element by its ID.
• getElementsByClassName() – Selects all elements with the same class.
• getElementsByTagName() – Selects elements by their HTML tag.
• querySelector() – Selects the first matching CSS selector.
• querySelectorAll() – Selects all matching CSS selectors.