The getElementsByClassName() Method in JavaScript

getElementsByClassName lets you find all elements that have a specific class on the page. This is a useful tool when working with a group of elements sharing the same style or functionality.

document.getElementsByClassName(class);

You can pass one or multiple class names to the method, such as just menu or header menu.

The method returns an HTMLCollection — a live collection containing all elements with the specified class. If no such elements exist on the page, an empty collection is returned.

Performing a search on the page for a specific class

let boxes = document.getElementsByClassName('box');
console.log(boxes); 
// Will output the collection of all elements with the class "box"

Now let’s change the background color of all elements with the box class

for (let item of boxes) {
  item.style.background = 'yellow';
}

getElementsByClassName is a quick and convenient way to get a group of elements by class. However, if you need a static list or a more complex CSS selector, it’s better to use querySelectorAll.


Home About Links

Text me