Following are the different ways through which we can get DOM element by class in javascript.
Class are used to provide common CSS properties to multiple DOM elements.
All the elements inside the DOM can be accessed only by using document object.
Using getElementsByClassName()
getElementsByClassName() returns an array of live collection of all HTML elements which have matching class names.
If no matching elements are found then it will return an empty array [].
<div class="prashant">Hello World!</div>
<script>
let element = document.getElementsByClassName('prashant');
console.log(element);
</script>
/*
HTMLCollection [div.prashant]
0: div.prashant
length: 1
__proto__: HTMLCollection
*/
live collection of all HTML elements means whatever changes are applied to these elements will be visible on the DOM.
If the element has multiple classes then we can pass multiple classes on which we have to select the element.
<div class="prashant javascript engineer">Hello World!</div>
<script>
let element = document.getElementsByClassName('prashant engineer');
console.log(element);
</script>
/*
HTMLCollection [div.prashant.javascript.engineer]
0: div.prashant.javascript.engineer
length: 1
__proto__: HTMLCollection
*/
Note:- Class names are case sensitive so prashant and Prashant are two different classes.
Using querySelector() to get element by class in Javascript.
We can also use querySelector() to get elements by class in javascript.
It uses CSS selectors to select the elements and returns the first matching elements. If no match is found then it will return null.
Class are represented with .classname dot followed by class name in CSS.
<div class="prashant javascript engineer">Hello World!</div>
<script>
let element = document.querySelector('.prashant');
console.log(element);
</script>
//"<div class='prashant javascript engineer'>Hello World!</div>"
If you want to select all matching elements then you can use querySelectorAll().
Using querySelectorAll()
querySelectorAll() selects all the matching elements and return and array of NodeList of the matching elements. If no elements are matched then it will return an empty array of NodeList.
<div class="prashant javascript engineer">Hello World!</div>
<div class="javascript">Javascript!</div>
<script>
let element = document.querySelectorAll('.javascript');
console.log(element);
</script>
/*
NodeList(2) [div.prashant.javascript.engineer, div.javascript]
0: div.prashant.javascript.engineer
1: div.javascript
length: 2
__proto__: NodeList
*/
Using attribute selector
If you want want to use the CSS selectors then you can also use attribute selector [class='javascript'] as an alternative to get elements by class.
<div class="javascript">Hello World!</div>
<div class="javascript">Javascript!</div>
<script>
let element = document.querySelectorAll('[class="javascript"]');
console.log(element);
</script>
/*
NodeList(2) [div.javascript, div.javascript]
0: div.javascript
1: div.javascript
length: 2
__proto__: NodeList
*/
Be aware using this method as it selects elements with exact match only if the element has multiple class then the match will fail.
<div class="javascript red">Hello World!</div>
<div class="javascript">Javascript!</div>
<script>
let element = document.querySelectorAll('[class="javascript"]');
console.log(element);
</script>
/*
NodeList(1) [div.javascript]
0: div.javascript
length: 1
__proto__: NodeList
*/