- JavaScript Basics
- JavaScript Tutorial
- JavaScript: where to write
- JavaScript: how to display
- JavaScript: keywords
- JavaScript: comments
- JavaScript: variables
- JavaScript: operators
- JavaScript: data types
- JavaScript Conditional Statements
- JavaScript: if-else
- JavaScript: switch
- JavaScript: for loop
- JavaScript: while loop
- JavaScript: do-while loop
- JavaScript: break and continue
- JavaScript Popup Boxes
- JavaScript: alert box
- JavaScript: confirm box
- JavaScript: prompt box
- JavaScript Popular Topics
- JavaScript: functions
- JavaScript: innerHTML
- JavaScript: getElementById()
- JavaScript: getElementsByClassName()
- JavaScript: getElementsByName()
- JavaScript: getElementsByTagName()
- JavaScript: querySelector()
- JavaScript: querySelectorAll()
- JavaScript: document.write()
- JavaScript: console.log()
- JavaScript: boolean
- JavaScript: events
- JavaScript: Math object
- JavaScript: Math.random()
- JavaScript: Number()
- JavaScript: parseInt()
- JavaScript: parseFloat()
- JavaScript Arrays
- JavaScript: array
- JavaScript: find length of array
- JavaScript: add element at beginning
- JavaScript: add element at end
- JavaScript: remove first element
- JavaScript: remove last element
- JavaScript: get first index
- JavaScript: get last index
- JavaScript: reverse an array
- JavaScript: sort an array
- JavaScript: concatenate arrays
- JavaScript: join()
- JavaScript: toString()
- JavaScript: from()
- JavaScript: check if value exists
- JavaScript: check if array
- JavaScript: slice an array
- JavaScript: splice()
- JavaScript: find()
- JavaScript: findIndex()
- JavaScript: entries()
- JavaScript: every()
- JavaScript: fill()
- JavaScript: filter()
- JavaScript: forEach()
- JavaScript: map()
- JavaScript Strings
- JavaScript: string
- JavaScript: length of string
- JavaScript: convert to lowercase
- JavaScript: convert to uppercase
- JavaScript: string concatenation
- JavaScript: search()
- JavaScript: indexOf()
- JavaScript: search() vs. indexOf()
- JavaScript: match()
- JavaScript: match() vs. search()
- JavaScript: replace()
- JavaScript: toString()
- JavaScript: String()
- JavaScript: includes()
- JavaScript: substr()
- JavaScript: slice string
- JavaScript: charAt()
- JavaScript: repeat()
- JavaScript: split()
- JavaScript: charCodeAt()
- JavaScript: fromCharCode()
- JavaScript: startsWith()
- JavaScript: endsWith()
- JavaScript: trim()
- JavaScript: lastIndexOf()
- JavaScript Date and Time
- JavaScript: date and time
- JavaScript: Date()
- JavaScript: getFullYear()
- JavaScript: getMonth()
- JavaScript: getDate()
- JavaScript: getDay()
- JavaScript: getHours()
- JavaScript: getMinutes()
- JavaScript: getSeconds()
- JavaScript: getMilliseconds()
- JavaScript: getTime()
- JavaScript: getUTCFullYear()
- JavaScript: getUTCMonth()
- JavaScript: getUTCDate()
- JavaScript: getUTCDay()
- JavaScript: getUTCHours()
- JavaScript: getUTCMinutes()
- JavaScript: getUTCSeconds()
- JavaScript: getUTCMilliseconds()
- JavaScript: toDateString()
- JavaScript: toLocaleDateString()
- JavaScript: toLocaleTimeString()
- JavaScript: toLocaleString()
- JavaScript: toUTCString()
- JavaScript: getTimezoneOffset()
- JavaScript: toISOString()
- JavaScript Regular Expression
- JavaScript: regular expression
- JavaScript: RegEx . (dot)
- JavaScript: RegEx \w and \W
- JavaScript: RegEx \d and \D
- JavaScript: RegEx \s and \S
- JavaScript: RegEx \b and \B
- JavaScript: RegEx \0
- JavaScript: RegEx \n
- JavaScript: RegEx \xxx
- JavaScript: RegEx \xdd
- JavaScript: RegEx quantifiers
- JavaScript: RegEx test()
- JavaScript: RegEx lastIndex
- JavaScript: RegEx source
- JavaScript Programs
- JavaScript Programs
JavaScript getElementsByClassName()
The JavaScript getElementsByClassName() method returns an object similar to an array, representing all elements that have a specified class name. For example:
<!DOCTYPE html> <html> <body> <p>The value is <span class="x"></span>.</p> <p>The value is <span class="x"></span>.</p> <p>The value is <span class="x"></span>.</p> <script> var elements = document.getElementsByClassName("x"); var totElements = elements.length; for(var i=0; i<totElements; i++) { elements[i].innerHTML = 10; } </script> </body> </html>
The value is .
The value is .
The value is .
In above example, the following statement:
var elements = document.getElementsByClassName("x");
returns all three P (paragraph) elements, whose class name is the same, that is x, and initialized to the elements variable as an array-like object. Now, using the following statement:
var totElements = elements.length;
The length of elements will be initialized to the totElements variable. Because elements carry a total three elements, 3 will be initialized to the totElements variable. And using its indexes, I've set 10 as the content of all P elements, one by one, using the for loop.
The above example can also be written as:
<!DOCTYPE html> <html> <body> <p>The value is <span class="myClass"></span>.</p> <p>The value is <span class="myClass"></span>.</p> <p>The value is <span class="myClass"></span>.</p> <script> var elems = document.getElementsByClassName("myClass"); for(var i=0; i<elems.length; i++) elems[i].innerHTML = 10; </script> </body> </html>
JavaScript getElementsByClassName() Syntax
The syntax of the getElementsByClassName() method in JavaScript is:
getElementsByClassName(className)
It returns an array-like object containing all elements having the same specified className.
JavaScript getElementsByClassName() Example
Here is an example of the getElementsByClassName() method in JavaScript:
<!DOCTYPE html> <html> <body> <p class="codescracker">This is para one</p> <p class="codescracker">This is para two</p> <p class="codescracker">This is para three</p> <script> var elems = document.getElementsByClassName("codescracker"); for(var i=0; i<elems.length; i++) { elems[i].style.fontSize = "1.5em"; elems[i].style.backgroundColor = "red"; elems[i].style.color = "whitesmoke"; elems[i].style.padding = "12px"; } </script> </body> </html>
This is para one
This is para two
This is para three
Now let me modify the above example in a way to pick multiple elements by their class names and style them using JavaScript.
<!DOCTYPE html> <html> <body> <p class="a">This is para one</p> <p class="b">This is para two</p> <p class="a">This is para three</p> <p class="c">This is para four</p> <p class="d">This is para five</p> <p class="b">This is para six</p> <p class="a">This is para seven</p> <script> var elems = document.getElementsByClassName("a"); for(var i=0; i<elems.length; i++) { elems[i].style.fontSize = "1.5em"; elems[i].style.backgroundColor = "red"; elems[i].style.color = "whitesmoke"; elems[i].style.padding = "12px"; } var elems = document.getElementsByClassName("b"); for(var i=0; i<elems.length; i++) { elems[i].style.fontSize = "1.5em"; elems[i].style.backgroundColor = "purple"; elems[i].style.color = "whitesmoke"; elems[i].style.padding = "12px"; } var elems = document.getElementsByClassName("c"); for(var i=0; i<elems.length; i++) { elems[i].style.fontSize = "1.5em"; elems[i].style.backgroundColor = "blue"; elems[i].style.color = "whitesmoke"; elems[i].style.padding = "12px"; } var elems = document.getElementsByClassName("d"); for(var i=0; i<elems.length; i++) { elems[i].style.fontSize = "1.5em"; elems[i].style.backgroundColor = "#ccc"; elems[i].style.color = "whitesmoke"; elems[i].style.padding = "12px"; } </script> </body> </html>
This is para one
This is para two
This is para three
This is para four
This is para five
This is para six
This is para seven
In the above example, let me explain the following JavaScript code:
var elems = document.getElementsByClassName("a"); for(var i=0; i<elems.length; i++) { elems[i].style.fontSize = "1.5em"; elems[i].style.backgroundColor = "red"; elems[i].style.color = "whitesmoke"; elems[i].style.padding = "12px"; }
In the above block of code, the statement:
var elems = document.getElementsByClassName("a");
initializes an array-like object that has the class name a, to the variable elems. Therefore, now:
- elems[0] indicates the first P tag having a class name a. That is, <p class="a">This is para one</p>
- elems[1] indicates the second P tag having a class name a
- elems[2] indicates the third P tag having a class name a
And using the for loop, I've applied the style to all these three paragraphs using JavaScript.
In a similar way, the process goes for the next three classes, which are b, c, and d.
Since the following three JavaScript codes are responsible for changing the style:
- elems[i].style.fontSize = "1.5em";
- elems[i].style.color = "whitesmoke";
- elems[i].style.padding = "12px";
are similar to all; therefore, let me wrap these into a function in this way:
<!DOCTYPE html> <html> <body> <p class="a">This is para one</p> <p class="b">This is para two</p> <p class="a">This is para three</p> <p class="c">This is para four</p> <p class="d">This is para five</p> <p class="b">This is para six</p> <p class="a">This is para seven</p> <script> function changeStyle(element) { element.style.fontSize = "1.5em"; element.style.color = "whitesmoke"; element.style.padding = "12px"; } var elems = document.getElementsByClassName("a"); for(var i=0; i<elems.length; i++) { elems[i].style.backgroundColor = "red"; changeStyle(elems[i]); } var elems = document.getElementsByClassName("b"); for(var i=0; i<elems.length; i++) { elems[i].style.backgroundColor = "purple"; changeStyle(elems[i]); } var elems = document.getElementsByClassName("c"); for(var i=0; i<elems.length; i++) { elems[i].style.backgroundColor = "blue"; changeStyle(elems[i]); } var elems = document.getElementsByClassName("d"); for(var i=0; i<elems.length; i++) { elems[i].style.backgroundColor = "gray"; changeStyle(elems[i]); } </script> </body> </html>
If you already know that the document has a single element with a specified or given class name, then you can directly proceed as follows:
<!DOCTYPE html> <html> <body> <p>The value is <span class="cc"></span>.</p> <script> document.getElementsByClassName("cc")[0].innerHTML = 10; </script> </body> </html>
The value is .
Get Elements by Class Name inside an Element in JavaScript
To access or get only those elements with the specified class name that are inside some particular element. That is, to get all elements having the redTxt class that are available in an element with an id value of myDiv, use the following code:
document.getElementById('myDiv').getElementsByClassName('redTxt')
For example:
<!DOCTYPE html> <html> <body> <p class="redTxt">This is para one</p> <div id="myDiv"> <p class="redTxt">This is para two</p> <p class="redTxt">This is para three</p> </div> <p class="redTxt">This is para four</p> <script> var elems = document.getElementById('myDiv').getElementsByClassName('redTxt'); for(i=0; i<elems.length; i++) { elems[i].style.color = "red"; } </script> </body> </html>
This is para one
This is para two
This is para three
This is para four
Only elements with the class "redTxt," which are available within another element with the id "myDiv," will have a red style applied to them.
And if you want to get the first element with a specified class name available inside another element having some specified value like id, then proceed in this general way:
document.getElementById('myDiv').getElementsByClassName('redTxt')[0]
Get All Elements with Two Given Class Names
To get all elements having any two classes, say red and x, then use the following JavaScript code:
document.getElementsByClassName('red x')
« Previous Tutorial Next Tutorial »