HTML DOM Element getElementsByClassName() -menetelmä

Määritelmä ja käyttö

getElementsByClassName() Menetelmä palauttaa annetun luokan nimellä varustetun alielementtien joukon NodeList-objektina.

Katso myös:

classList-ominaisuus

className-ominaisuus

querySelector() -menetelmä

querySelectorAll() -menetelmä

getElementsByTagName() -menetelmä

HTML DOM Style-objekti

Ohje:

CSS syntaksi

CSS valitsimet

CSS valitsimet viittomakirja

NodeList

NodeList On tyyppien joukko, joka muistuttaa taulukkoa (luetteloa).

Voit käyttää indeksiä (alaviivaa) tavoitellaksesi luettelon soluja. Indeksointi alkaa 0:sta.

length-ominaisuusPalauttaa luettelon solujen määrän.

Esimerkki

Esimerkki 1

Muuta ensimmäisen luettelon kohteen tekstiä class="child":

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

Kokeile itse

Esimerkki 2

class="child" elementtien määrä "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Kokeile itse

Esimerkki 3

Muuta class="child" toisen elementin kokoa:

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Kokeile itse

Esimerkki 4

Muuta toisen elementin kokoa käyttämällä "child" ja "color"-luokkaa ensimmäisessä elementissä:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Kokeile itse

Esimerkki 5

Muuta class="child" elementtien väriä "myDIV"-elementissä:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Kokeile itse

Syntaksi

element.getElementsByClassName(classname)

Parametrit

Parametrit Kuvaus
classname

Välttämätön. Alielementin luokan nimi.

Erota useita nimiä välilyönnillä (esim. "child color").

Palautusarvo

Tyyppi Kuvaus
NodeList

Määritetty luokan nimellä varustetut elementtien alielementit.

Elementit järjestetään niiden ilmestyysjärjestykseen lähdekoodissa.

Selaimen tuki

element.getElementsByClassName() Se on DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki 9-11 Tuki Tuki Tuki Tuki