The getElementsByClassName() method is used for selecting or getting the elements through their class name value. This DOM method returns an array-like object that consists of all the elements having the specified classname. On calling the getElementsByClassName() method on any particular element, it will search the whole document and will return only those elements which match the specified or given class name.
Syntax
var ele=document.getELementsByClassName('name'); Here, name is the mandatory argument to be passed. It is the string that specifies either a single classname or multiple class names to match.
Example of getElementsByClassName() Method
Let’s look at some examples to know and understand the practical implementation of the method.
Example
It is a simple class implementation that returns an array-like object on invoking the variable x.
<html>
<head> <h5>DOM Methods </h5> </head>
<body>
<div class="Class">
This is a simple class implementation
</div>
<script type="text/javascript">
var x=document.getElementsByClassName('Class');
document.write("On calling x, it will return an arrsy-like object: <br>"+x);
</script>
</body>
</html>Output:
Similarly, we can implement the getElementsByClassName() method for returning collections of elements for multiple classes.
Difference between getElementsByClassName(), querySelector() and querySelectorAll() Methods
getElementsByClassName(): It matches the elements with the specified class name, and returns a set of the matched elements. The returned elements are live HTML collection of elements. These live elements can be further updated if any changes are made in the Document Object Model.
querySelector(): It returns only a single element that matches the specified classname. If it does not find any matching element, it returns null.
The main point to understand is that all the above-described methods return either one element or a list, but the getELementsByClassName() method serves the dynamic updation, and the other two methods serve for the static.
Leave a Reply