HTML DOM Document getElementsByClassName() -menetelmä

Määritelmä ja käyttö

getElementsByClassName() Menetelmä palauttaa tietyn luokan nimisen elementtien kokoelman.

getElementsByClassName() Menetelmä palauttaa HTMLCollection.

getElementsByClassName() Ominaisuudet ovat lukuun ottamatta.

HTMLCollection

HTMLCollection On HTML-elementtien taulukon kaltainen kokoelma (lista).

Kokoelman elementtejä voidaan tarkastella indeksin avulla (alkaen indeksistä 0).

length Ominaisuus palauttaa kokoelmassa olevien elementtien määrän.

Katso myös:

getElementById() -menetelmä

getElementsByTagName() -menetelmä

querySelector() -menetelmä

querySelectorAll() -menetelmä

HTMLKokoelma-objekti

Esimerkki

Esimerkki 1

Hanki kaikki elementit, joilla on luokka="esimerkki":

const collection = document.getElementsByClassName("example");

Kokeile itse

Esimerkki 2

Hanki kaikki elementit, joilla on sekä "esimerkki" että "väri"-luokka:

const kokoelma = document.getElementsByClassName("esimerkki väri");

Kokeile itse

Esimerkki 3

class="example" elementtien määrä:

let numb = document.getElementsByClassName("example").length;

Kokeile itse

Esimerkki 4

Muuta kaikkien class="example" elementtien taustaväri:

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Kokeile itse

Syntaksi

document.getElementsByClassName("classname)

Parametrit

Parametrit Kuvaus
classname

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

Hakeminen tyhjillä välilyönneillä erotetuista useista luokista, esimerkiksi "test demo".

Palautusarvo

Tyyppi Kuvaus
Objekti

HTMLCollection-objekti.

Määritellyn luokan nimellä varustettujen elementtien joukko.

Järjestää elementit niiden esiintymisjärjestyksen mukaan dokumentissa.

Selaimen tuki

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

Kaikki selaimet tukevat sitä:

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

Liittyvät sivut

CSS opetusohjelma:CSS-kieli

CSS viittausopas:CSS .class -valitsin

HTML DOM viittausopas:element.getElementsByClassName()

HTML DOM viittausopas:className ominaisuus

HTML DOM viittausopas:classList ominaisuus

HTML DOM viittausopas:Style-objekti