The getElementsByClassName() method returns a live collection of all elements that have the specified class name(s). It can be called on the document or on any individual element to search only within its descendants, and the results are accessed by index starting from 0.
Syntax
document.getElementsByClassName(classnames);Parameters: This is a required method that takes only one parameter, which is a string containing space-separated class names of the elements that are to be searched for. For searching with multiple class names, it must be separated with space.
Note: We can use the length property that returns the collection of all HTML elements in a document for the specified class name & then by looping through the HTML elements, we can take the information that wants.
Example 1: This example describes the getElementsByClassName() method for getting access to an HTML element by its class name.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM getElementByClassName() Method
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
.example {
padding: 10px;
margin: auto;
margin-top: 10px;
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
DOM getElementByClassName() Method
</h2>
<div>
<h4 class="example">
div1
</h4>
<h4 class="yellowBorder example">
div2
</h4>
<h4 class="greenBorder example">
div3
</h4>
<h4 class="example">
div4
</h4>
</div>
<!--Driver Code Ends-->
<script>
document.getElementsByClassName('greenBorder example')[0]
.style.border = "10px solid green";
document.getElementsByClassName('yellowBorder example')[0]
.style.border = "10px solid yellow";
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: This example describes the use of the document.getElementsByClassName() method that accesses all the 3 button classes with the specific color & alters the color of the button on clicked & the last button resets all the above 3 buttons to their initial state.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM getElementByClassName() Method
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
button {
background-color: black;
color: white;
width: 300px;
padding: 10px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
DOM getElementByClassName() Method
</h2>
<div>
<button onclick="red()"
class="black red">
Click to change to red button
</button>
<br>
<button onclick="blue()"
class="black blue">
Click to change to blue button
</button>
<br>
<button onclick="yellow()"
class="black yellow">
Click to change to yellow button
</button>
<br>
<button onclick="black()">
Click to change to all buttons to initial state
</button>
</div>
<!--Driver Code Ends-->
<script>
function red() {
document.getElementsByClassName('red')[0]
.style.backgroundColor = 'red';
}
function blue() {
document.getElementsByClassName('blue')[0]
.style.backgroundColor = 'blue';
}
function yellow() {
document.getElementsByClassName('yellow')[0]
.style.backgroundColor = 'yellow';
}
function black() {
var elements =
document.getElementsByClassName('black');
for(var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'black';
}
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- Returns a live collection : The HTMLCollection automatically updates when elements with the matching class are added or removed from the DOM. This can be useful but also surprising during loops.
- Available on both Document and Element : You can call it on the whole document or on a specific element to search only within its descendants.
