getElementsByClassName Method in JavaScript

Key Features of the getElementsByClassName Method:

• getElementsByClassName is a method of the Document Object that allows you to retrieve all elements with a specific class name.
• This method returns an HTMLCollection (live collection), meaning it reflects changes to the document in real-time.
• Since multiple elements can have the same class name, getElementsByClassName returns all matching elements rather than a single one.
• You can access each element in the collection using array-like indexing and loop over them to apply changes.

document.getElementsByClassName("className");

The getElementsByClassName method in JavaScript is used to access all elements with a specified class name. It returns a live HTMLCollection of elements, which can be used to dynamically modify content, styles, and attributes of multiple elements at once.

Key Features of the getElementsByClassName Method:

• getElementsByClassName is a method of the Document Object that allows you to retrieve all elements with a specific class name.
• This method returns an HTMLCollection (live collection), meaning it reflects changes to the document in real-time.
• Since multiple elements can have the same class name, getElementsByClassName returns all matching elements rather than a single one.
• You can access each element in the collection using array-like indexing and loop over them to apply changes.

Example 1: Changing Text Content for Multiple Elements

This example shows how to change the text content of all elements with a specified class using getElementsByClassName:

var elements = document.getElementsByClassName("exampleClass");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Updated Content";
                }

Example 2: Changing Styles of Multiple Elements

In this example, we change the style of multiple elements with a specific class using getElementsByClassName:

var elements = document.getElementsByClassName("highlight");
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = "blue";
elements[i].style.fontWeight = "bold";
                }

Example 3: Adding Event Listeners to Multiple Elements

This example demonstrates how to add an event listener to multiple elements using getElementsByClassName:

var buttons = document.getElementsByClassName("clickButton");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
alert("Button clicked!");
});
}

Example 4: Toggling Classes on Multiple Elements

This example shows how to toggle a class for multiple elements with getElementsByClassName:

var elements = document.getElementsByClassName("toggleClass");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.toggle("active");
                }

Additional Example: Changing Attributes of Multiple Elements

This example demonstrates changing an attribute of multiple elements with the class "imageClass":

var images = document.getElementsByClassName("imageClass");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("alt", "Updated image description");
}