How to Select Multiple Elements by Class Name in JavaScript

Author:
In JavaScript, selecting multiple elements with the same class name is a common task when working with the DOM (Document Object Model). This is useful when you want to apply the same action to several elements at once. JavaScript provides a method called document.getElementsByClassName() to achieve this. In this post, we'll explore how to select multiple elements by their class name and perform actions on them.

Table of Contents

  1. Using document.getElementsByClassName()
  2. Looping Over the Selected Elements
  3. Using document.querySelectorAll()
  4. Conclusion

1. Using document.getElementsByClassName()

The document.getElementsByClassName() method allows you to select all elements that share the same class name. It returns a live HTMLCollection (similar to an array) of all matching elements.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Select Elements by Class Name</title>
</head>
<body>
  <p class="info">This is the first paragraph.</p>
  <p class="info">This is the second paragraph.</p>
  <p>This paragraph doesn't have the class 'info'.</p>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const infoElements = document.getElementsByClassName("info");
console.log(infoElements);

Output:

HTMLCollection(2) [p.info, p.info]

Explanation:

  • document.getElementsByClassName("info") selects all <p> elements with the class name "info" and returns them in an HTMLCollection.
  • The result is an array-like collection containing the matching elements.

2. Looping Over the Selected Elements

After selecting multiple elements, you often need to perform some actions on them. Since document.getElementsByClassName() returns an HTMLCollection, you can loop through it using a for loop or the Array.from() method to convert it to an array.

Example: Changing Text Content

const infoElements = document.getElementsByClassName("info");

for (let i = 0; i < infoElements.length; i++) {
  infoElements[i].textContent = `This is paragraph ${i + 1}`;
}

Output in the HTML:

<p class="info">This is paragraph 1</p>
<p class="info">This is paragraph 2</p>

Explanation:

  • The loop iterates over each element in the infoElements collection and updates its textContent to reflect its position.

Example: Changing the Style

const infoElements = document.getElementsByClassName("info");

for (let element of infoElements) {
  element.style.color = "blue";
  element.style.fontWeight = "bold";
}

This changes the text color of all elements with the "info" class to blue and makes the text bold.

3. Using document.querySelectorAll()

Another way to select multiple elements by class name is to use document.querySelectorAll(). This method returns a NodeList, which is static (doesn’t update automatically when the DOM changes) and can be iterated over more easily with modern JavaScript features like forEach().

Example:

const infoElements = document.querySelectorAll(".info");

infoElements.forEach((element, index) => {
  element.textContent = `This is paragraph ${index + 1}`;
});

Output:

<p class="info">This is paragraph 1</p>
<p class="info">This is paragraph 2</p>

Explanation:

  • document.querySelectorAll(".info") selects all elements with the "info" class and returns a NodeList.
  • You can use the forEach() method to loop through the selected elements and modify them.

Difference Between getElementsByClassName() and querySelectorAll():

  • getElementsByClassName() returns a live HTMLCollection, meaning it updates automatically if the DOM changes.
  • querySelectorAll() returns a static NodeList, which does not update when the DOM changes, but allows more flexible iteration with methods like forEach().

Conclusion

To select multiple elements by their class name in JavaScript, you can use either document.getElementsByClassName() or document.querySelectorAll(), depending on your needs. Both methods allow you to retrieve all elements with the same class and perform actions on them, but querySelectorAll() provides more flexibility when working with modern JavaScript methods like forEach().

Key Points:

  • document.getElementsByClassName() returns a live HTMLCollection of elements with the specified class.
  • document.querySelectorAll() returns a static NodeList, allowing easier iteration with forEach().
  • You can loop over the selected elements to modify their content, styles, or attributes.

Related JavaScript Programs:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment