HTML DOM getElementsByClassName () method
Examples
Get all elements by class name:
try it"
Definitions and use
getElementsByClassName () method returns all elements in the document specify the class name of the collection, as NodeList object.
NodeList object represents a node list order. NodeList object we can access the list of nodes (index number starting from 0) through the node list of the node index number.
Tip: You can use the NodeList object's length property to determine the number of elements by class name, and the various elements of the cycle to get the elements you need.
Browser Support
Figures in the table represent the first browser to support the method version number.
| method | |||||
|---|---|---|---|---|---|
| getElementsByClassName () | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
grammar
parameter
| parameter | Types of | Description |
|---|---|---|
| classname | String | have to. Element classes you need to get the name. Multiple class names separated by spaces, such as "test demo". |
Technical Description
| DOM version: | Core Level 1 Document Object |
|---|---|
| return value: | NodeList object that represents the element specifies the class name of the collection. The order of elements in the collection of its sort in order of appearance in the code. |
More examples
Examples
Gets the "example" and "color" the class name of all the elements:
try it"
Examples
How many style class = "example" elements (using the length property of the NodeList) to view the document are:
try it"
Examples
Change the background color of all styles class = "example" elements:
var i;
for (i = 0 ; i < x.length; i++) {
x[i].style.backgroundColor = "red" ;
}
try it"
Related Pages
CSS tutorial: CSS selectors
CSS Reference: CSS selectors .class
HTML DOM Reference Manual: Element .getElementsByClassName ()
HTML DOM Reference: className attribute
HTML DOM Reference Manual: HTML DOM attributes classList
HTML DOM Reference Manual: HTML DOM Style Object