HTML DOM getElementsByClassName() Metode
❮ Die elementvoorwerpVoorbeeld
Verander die teks van die eerste lysitem met class="child" (indeks 0) in 'n lys met class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die getElementsByClassName()-metode gee 'n versameling van 'n element se kinderelemente met die gespesifiseerde klasnaam terug as 'n NodeList-objek.
Die NodeList-objek verteenwoordig 'n versameling nodusse. Die nodusse kan verkry word deur indeksnommers. Die indeks begin by 0.
Wenk: Jy kan die lengte -eienskap van die NodeList-objek gebruik om die aantal kindernodusse met die gespesifiseerde klasnaam te bepaal, dan kan jy deur alle nodusse loop en die inligting wat jy wil onttrek.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sintaksis
element.getElementsByClassName(classname)
Parameterwaardes
| 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". |
Tegniese besonderhede
| DOM weergawe: | Kernvlak 1 Elementvoorwerp |
|---|---|
| Terugkeerwaarde: | 'n NodeList-objek, wat 'n versameling van die elemente se kinderelemente met die gespesifiseerde klasnaam verteenwoordig. Die elemente in die teruggekeerde versameling word gesorteer soos dit in die bronkode verskyn. |
Meer voorbeelde
Voorbeeld
Verander die agtergrondkleur van die tweede element met class="child" binne 'n <div>-element:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Voorbeeld
Vind uit hoeveel elemente met class="child" daar binne-in 'n <div>-element is (gebruik die lengte-eienskap van die NodeList-objek):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Voorbeeld
Verander die agtergrondkleur van die eerste element met beide die "kind" en "kleur" klas binne 'n element met class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Voorbeeld
Verander die agtergrondkleur van alle elemente met class="child" binne 'n <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";
}
Verwante bladsye
CSS-tutoriaal: CSS-sintaksis
CSS-verwysing: CSS .class Selector
HTML DOM-verwysing: document.getElementsByClassName()
HTML DOM Verwysing: klasnaam Eiendom
HTML DOM-verwysing: classList Property
HTML DOM Verwysing: HTML DOM Style Object
❮ Die elementvoorwerp