HTML DOM getElementsByClassName () method

Examples

Modify the list class = "example" in the class = "child" of the first item (index value 0) of the text:

var list = document.getElementsByClassName ( "example" ) [0];
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

element .getElementsByClassName (classname)

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:

var x = document.getElementById ( "myDIV" );
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:

var x = document.getElementById ( "myDIV" ) .getElementsByClassName ( "child") .length;

x The output is:

try it"

Examples

Modify class = "example" elements in the first class called background color "child" and "color" element:

var x = document.getElementsByClassName ( "example" ) [1];
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 x = document.getElementById ( "myDIV" );
var y = x.getElementsByClassName ( "child" );
var i;
for (i = 0; i < y.length; i ++) {
y [i] .style.backgroundColor = "red ";
}

try it"

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

Element object

Previous: HTML DOM getElementsByClassName () method

Next: HTML DOM classList property