HTML DOM getElementsByClassName () method
Examples
Modify the list class = "example" in the class = "child" of the first item (index value 0) of the text:
list.getElementsByClassName ( "child") [0 ] .innerHTML = "Milk";
Modify the text before:
- Coffee
- Tea
After modifying the text:
- Milk
- Tea
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 Value
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 Element 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
Modify <div> element in the second class = "child" elements of the background color:
x.getElementsByClassName ( "child") [1 ] .style.backgroundColor = "red";
try it"
Examples
See <div> element in the number of class = "child" elements (using NodeList the length property) are:
x The output is:
try it"
Examples
Modify class = "example" elements in the first class called background color "child" and "color" element:
x.getElementsByClassName ( "child color") [ 0] .style.backgroundColor = "red";
try it"
Examples
Modify <div> element class = "child" of all the elements of the background color:
var y = x.getElementsByClassName ( "child" );
var i;
for (i = 0; i < y.length; i ++) {
y [i] .style.backgroundColor = "red ";
}
try it"
related articles
CSS tutorial: CSS selectors
CSS Reference: CSS selectors .class
HTML DOM Reference Manual: document.getElementsByClassName ()
HTML DOM Reference: className attribute
HTML DOM Reference Manual: HTML DOM Style Object