Metoda getElementsByClassName() HTML DOM

Příklad

Změňte text první položky seznamu s class="child" (index 0) v seznamu s class="example":

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Další příklady „Vyzkoušejte si to sami“ níže.

Definice a použití

Metoda getElementsByClassName() vrací kolekci podřízených prvků prvku se zadaným názvem třídy jako objekt NodeList.

Objekt NodeList představuje kolekci uzlů. K uzlům lze přistupovat pomocí indexových čísel. Index začíná na 0.

Tip: Pomocí vlastnosti length objektu NodeList můžete určit počet podřízených uzlů se zadaným názvem třídy, poté můžete procházet všechny uzly a extrahovat požadované informace.

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.

Method
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

Syntax

element.getElementsByClassName(classname)

Hodnoty parametrů

Parameter	Type	Description
classname	String	Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color".

Technické údaje

Verze DOM:	Základní objekt prvku úrovně 1
Návratová hodnota:	Objekt NodeList představující kolekci podřízených prvků prvků se zadaným názvem třídy. Prvky ve vrácené kolekci jsou seřazeny tak, jak se objevují ve zdrojovém kódu.

Další příklady

Příklad

Změňte barvu pozadí druhého prvku pomocí class="child" uvnitř prvku <div>:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Příklad

Zjistěte, kolik prvků s class="child" je uvnitř prvku <div> (pomocí vlastnosti length objektu NodeList):

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

Příklad

Změňte barvu pozadí prvního prvku pomocí třídy "child" i "color" uvnitř prvku pomocí class="example":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Příklad

Změňte barvu pozadí všech prvků pomocí class="child" uvnitř prvku <div>:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}