Introduction to JavaScript Get Element by Class
Whenever we want to access and get an element present in the DOM of HTML in javascript, we can get the element either based on its id, class or name. There are predefined methods and functions provided to access HTML elements in javascript that are mentioned in the Document interface. In this article, we will learn how we can access an element(s) based on its class.
GetElementsByClassName() method is used to retrieve a collection or array of all the HTML elements that are child nodes of the element on which this method is called and have the class as mentioned in the parameter of this method. If we want to retrieve elements of more than one class, we can specify multiple class names by separating all class names with space. This method can be called from the document or using any other element. Whenever the method is called using document then all the child nodes of the DOM including the root node are searched for the matching class as specified in the parameter of the method when called. In case when the method is called using any other object then all the HTML elements which are the child nodes are searched for the matching class name.
Syntax:
var htmlElements = document.getElementsByClassName(class names seperated with space);OR
var htmlElements = rootElement.getElementsByClassName(class names seperated with space);Examples to Implement JavaScript Get Element by Class
Below are the examples of JavaScript Get Element by Class:
Example #1
Document scope with a single class. Let us see how we can use this method for all the elements of DOM for a single class with the help of an example:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Demonstration of getting elements of a particular class in javascript</h2>
<div class="sample">IT Websites.</div>
<div class="demo">Educational Websites.</div>
<div class="sample">EDUCBA is the best platform to learn languages.</div>
<p>Let us change the background color of all the elements of the DOM who have sample class to pink.</p>
<button onclick="sampleFunction()">Change background color of elements with sample class</button>
<script>
function sampleFunction() {
var myElements = document.getElementsByClassName("sample"); for(var counter = 0; counter < myElements.length; counter++){
myElements[counter].style.background = "pink";
}
}
</script>
</body>
</html>Output:
After clicking on the “Change background color of elements with sample class” button output is as follows –
Example #2
Document Scope with Multiple Classes. Now let us learn how we can retrieve the elements of all the DOM with classes specified more than one in the parameter of the getElementsByClass() method.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Demonstration of getting elements of a multiple class in javascript</h2>
<div class="sample">IT Websites.</div>
<div class="demo">Educational Websites.</div>
<div class="sample demo">Educational IT Websites.</div>
<div class="sample">EDUCBA is the best platform to learn languages.</div>
<p>Let us change the background color of all the elements of the DOM who have sample class to pink.</p>
<button onclick="sampleFunction()">Change background color of elements with sample or demo class</button>
<script>
function sampleFunction() {
var myElements = document.getElementsByClassName('sample demo');
for(var counter = 0; counter < myElements.length; counter++){ myElements[counter].style.background = "pink";
}
}
</script>
</body>
</html>Output:
After clicking on “Change background color of elements with sample and demo class” button only the elements with classes having both sample and demo will be retrieved. And output of the code will be as follows :
Example #3
Getting the first element matching the specified class else undefined. Most of the time, there is a necessity to retrieve only the first element of the DOM matching the specified class and if its obtained or is present then performing specific manipulations on the same. Let us see how we can retrieve this element with the help of an example.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Demonstration of getting first element of a single class in javascript</h2>
<div class="sample">IT Websites.</div>
<div class="demo">Educational Websites.</div>
<div class="sample demo">Educational IT Websites.</div>
<div class="demo">EDUCBA is the best platform to learn languages.</div>
<p>Let us change the background color of all the elements of the DOM who have sample class to pink.</p>
<button onclick="sampleFunction()">Change background color of first element with demo class if present</button>
<script>
function sampleFunction() {
var myElement = document.getElementsByClassName('demo')[0]; if(myElement!=undefined){
myElement.style.background = "pink";
}
}
</script>
</body>
</html>Output:
After clicking on the button, output resembles as follows:
Example #4
Element scope and single class. Now, we will use this method to get all the elements having a particular class but instead of having a DOM scope, we will call this method on an element. What happens when we call this method on the element instead of the document is that all the elements below this element and that element itself are considered while finding the matching class element. Let us see, how we can use this and implement it with the help of an example. In the below example, there is one div with id as myDiv which is retrieved by using the method getElementById(). Further, we will call the getElementsByClassName() method on myDiv element to retrieve all the elements with a class named myText and display the alerts specifying a number of matching elements it has found.
Code:
<head>
<style>
.myText { color:#FF0000;
}
</style>
<script type="text/javascript"> function GetmyTextElements () {
var outerElement = document.getElementById ("outerElement"); if (outerElement.getElementsByClassName) {
var innerElements = outerElement.getElementsByClassName ("myText");
alert ("There are " + innerElements.length + " elements in the outerElement with class 'myText'.");
}
else {
alert ("I think your browser does not supports this method.");
}
}
</script>
</head>
<body>
<button onclick="GetmyTextElements ()">Get the elements in the outerElement with 'myText' class!</button>
<br /><br />
<div id="outerElement">
<b class="myText">EDUCBA is the best place to learn about new technologies and coding!</b>
<br />
<i class="myText">Here, We are focussing on getting the insights of javascript.</i>
<br />
</div>
</body>Output:
After clicking on “Get the elements in the outerElement with ‘myText’ class!” button, it gives an alert saying number of elements it found with the specified class below that element.
