The getElementsByClassName() method in JavaScript is used to retrieve a collection of HTML elements on a webpage that have a specified class name. It returns a NodeList object, which is a collection of all elements with the provided class name. Here's a detailed explanation of how it works and examples of its usage:
The syntax for getElementsByClassName() is:
document.getElementsByClassName("className");
The method takes a single parameter, which is the name of the class you want to select. The class name is specified as a string enclosed in quotes.
Example 1: Selecting HTML elements and modifying their content:
HTML:
<p class="myClass">First paragraph</p>
<p class="myClass">Second paragraph</p>
JavaScript:
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Modified content";
}
In this example, the getElementsByClassName() method is used to select all
elements with the class name "myClass". It returns a NodeList object containing both elements. The for loop then iterates over each element in the NodeList and modifies their innerHTML property to replace their content with "Modified content".
Example 2: Changing the CSS style of HTML elements:
HTML:
<p class="myClass">First paragraph</p>
<p class="myClass">Second paragraph</p>
JavaScript:
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = "red";
}
In this example, the getElementsByClassName() method is used to select all
elements with the class name "myClass". The for loop then iterates over each element in the NodeList and modifies their style property to change their color to red.
Example 3: Adding an event listener to HTML elements:
HTML:
<button class="myButton">Button 1</button>
<button class="myButton">Button 2</button>
JavaScript:
var buttons = document.getElementsByClassName("myButton");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
console.log("Button clicked!");
});
}
In this example, the getElementsByClassName() method is used to select all button elements with the class name "myButton". The for loop then iterates over each button element in the NodeList and adds an event listener to it that listens for the click event. When a button is clicked, the provided callback function is executed, logging a message to the console.
Overall, the getElementsByClassName() method is a powerful tool to retrieve and manipulate collections of HTML elements based on their class names. It allows developers to perform operations on multiple elements at once, such as modifying their content, changing their styles, or adding event listeners.