JavaScript getElementsByClassName (Suomi)

Yhteenveto: Tässä opetusohjelmassa opit käyttämään menetelmää getElementsByClassName() elementtien valitsemiseksi luokan nimen mukaan.

Johdanto getElementsByClassName () -metodiin

Jokaisella HTML-elementillä on tällainen valinnainen luokan attribuutti:

Code language: HTML, XML (xml)

Class-attribuutin arvo on välilyönnillä erotettu luettelo elementin luokista. Luokat erottavat kirjainkoon.

Luokat antavat sinun käyttää CSS: ää elementtien sovittamiseen. Esimerkki:

Code language: CSS (css)

JavaScriptissä käytät elementtejä luokkien perusteella käyttämällä getElementsByClassName() -menetelmää.

getElementsByClassName() -menetelmä on käytettävissä objektilla document ja kaikilla HTML-elementeillä.

getElementsByClassName() -menetelmä hyväksyy yhden argumentin, joka on merkkijono, joka sisältää yhden tai useamman luokan nimen:

Code language: JavaScript (javascript)

Tässä syntaksissa parametri classNames on merkkijono, joka edustaa vastaavaa luokan nimeä. Esimerkki:

Code language: JavaScript (javascript)

Jos sovitat elementtejä usealle luokalle, sinun on käytettävä välilyöntiä niiden erottamiseen tällä tavalla:

Code language: JavaScript (javascript)

Huomaa, että et voi käyttää luokan valitsimia, esim. .btn tai .btn-primary getElementsByClassName() -menetelmä.

Metodi getElementsByClassName() palauttaa live HTMLCollection -elementit, jotka on taulukon muotoinen objekti.

Jos kutsutaan getElementsByClassName() -menetelmää objektissa document, menetelmä etsii elementeille, joilla on määritetyt luokan nimet koko asiakirjassa.

Kuitenkin, kun kutsutaan getElementsByClassName() -menetelmää tietylle elementille, se palauttaa vain vastaavat elementit kyseisen elementin alipuu.

JavaScript getElementsByClassName () -esimerkkejä

Otetaan esimerkkejä getElementsByClassName() -menetelmän käytöstä.

Oletetaan, että sinulla on seuraava HTML:

1) Soitetaan JavaScript getElementsByClassName () -elementtiesimerkki

Seuraava esimerkki kuvaa, miten getElementsByClassName() -menetelmää käytetään valitsemaan <li> kohteet, jotka ovat <ul> -elementin jälkeläisiä:

Tulos:

Code language: JavaScript (javascript)

Kuinka se toimii:

• Valitse ensin <ul> -elementti, jolla on luokan nimi menu käyttämällä getElementById() -menetelmää.
• Valitse sitten <li> -elementit, jotka ovat <ul> -elementti käyttämällä getElementsByClassName() -menetelmää.
• Luo lopuksi taulukko -elementit lainaamalla objektin Array map() -menetelmää.

2) Soitetaan JavaScript getElementsByClassName () asiakirjaesimerkissä

Elementin etsiminen class heading-secondary, käytät seuraavaa koodia:

Output:

Code language: JavaScript (javascript)

Tämä esimerkki kutsuu getElementsByClassName() -menetelmää objektissa document, joten se etsii elementtejä, joiden luokka on heading-secondary koko dokumentissa.

Tässä opetusohjelmassa opit käyttämään getElementsByClassName() -menetelmää elementtien valitsemiseksi yhdellä tai useammalla luokan nimellä.