HTML DOM getElementsByClassName() Method

<Element Object

Exemplu

Modificați textul primul element listă cu class = „copil“ (index 0) într - o listă cu class = „exemplu“:

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

Înainte de a schimba textul:

Coffee
Tea

După modificarea textului:

Milk
Tea

Încearcă - l singur »

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.

Definiție și utilizare

getElementsByClassName() Metoda returnează o colecție de elemente copil unui element cu numele clasei specificat, ca un obiect NodeList.

Obiectul NodeList reprezintă o colecție de noduri. Nodurile pot fi accesate prin numere de index. Indicele începe la 0.

Indicație: Puteți utiliza lungimea proprietatea obiectului NodeList pentru a determina numărul de noduri copil cu numele clasei specificate, atunci puteți bucla prin toate nodurile și extrage informațiile pe care le doriți.

Suport pentru browser-

Numerele din tabel specifică prima versiune de browser care acceptă pe deplin metoda.

Metodă
getElementsByClassName()	4	9	3.0	3.1	9.5

Sintaxă

element .getElementsByClassName( classname )

Valorile parametrilor

Parametru	Tip	Descriere
classname	String	Necesar. Numele clasei a elementelor pe care doriți să le copil obține. Pentru a căuta mai multe nume de clasă, separați - le cu spații, cum ar fi "child color" .

Detalii tehnice

DOM Versiune:	Nivelul de bază 1 Element Obiect
Întoarcere Valoare:	Un obiect NodeList, ceea ce reprezintă o colecție de elemente copil elementelor cu numele clasei specificat. Elementele din colecția returnate sunt sortate așa cum apar în codul sursă.

Mai multe exemple

Exemplu

Schimba culoarea de fundal a elementului al doilea cu class = „copil“ în interiorul unui <div> Element:

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

Încearcă - l singur »

Exemplu

Aflați cât de multe elemente cu class = „copil“ există în interiorul unui <div> elementul (folosind proprietatea de lungime a obiectului NodeList):

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

Rezultatul x va fi:

Încearcă - l singur »

Exemplu

Schimba culoarea de fundal a primului element atât cu "child" și "color" clasa în interiorul unui element cu class = „exemplu“:

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

Încearcă - l singur »

Exemplu

Schimbarea culorii de fundal a tuturor elementelor cu class = „copil“ în interiorul unui <div> Element:

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

Încearcă - l singur »