HTML DOMTokenList -referenssioppa

DOMTokenList

DOMTokenList On joukko välilyönnillä erotettuja merkkejä.

DOMTokenListia voidaan tarkastella indeksin avulla (alkaen indeksistä 0).

length-ominaisuusPalauttaa DOMTokenList-objektin merkkien määrän.

Huomautus:HTML-elementin classList-ominaisuusEdustaa DOMTokenList-objektia.

DOMTokenList-ominaisuudet ja -metodit

Nimi Kuvaus
add() Lisää yhden tai useamman merkin luetteloon.
contains() Palauttaa true, jos luettelo sisältää luokan.
entries() Palauttaa iteroinnin avaimesta ja arvosta koostuvista elementeistä.
forEach() Suorita paluutoiminto jokaiselle luettelossa olevalle merkkijonolle.
item() Palauta määritellyssä indeksissä oleva merkkijono.
keys() Palauta sisältävien avainten iteraattori.
length Palauta luettelossa olevien merkkijonojen määrä.
remove() Poista yksi tai useita merkkijonoja luettelosta.
replace() Korvaa luettelossa olevat merkkijonot.
supports() Jos merkkijono on ominaisuuden tukema merkkijono, palauta true.
toggle() Vaihda luettelossa olevien merkkijonojen välillä.
value Palauta merkkijonona merkkijonojen lista.
values() Palauta lista-arvojen iteraattori.

Esimerkki

Esimerkki 1

Lisää "myStyle"-luokka elementtiin:

Lisää "myStyle"-luokka elementtiin:

Kokeile itse

Esimerkki 2

Poista "myStyle"-luokka elementistä:

element.classList.remove("myStyle");

Kokeile itse

Esimerkki 3

Avaa ja sulje "myStyle":

element.classList.toggle("myStyle");

Kokeile itse

Sivun alaosassa on lisää esimerkkejä.

Ei taulukko

DOMTokenList ei ole taulukko!

DOMTokenList saattaa näyttää taulukolta, mutta se ei ole sitä.

Voit käydä DOMTokenListia läpi ja käyttää sen indeksointia merkkijonojen viittaamiseen.

Mutta et voi käyttää taulukkometodeja DOMTokenListilla, kuten push(), pop() tai join().

Esimerkki

Esimerkki 1

Lisää useita luokkia elementtiin:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Kokeile itse

Esimerkki 2

Poista useita luokkia elementistä:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Kokeile itse

Esimerkki 3

Hanki elementin luokkien määrä:

let numb = element.classList.length;

Kokeile itse

Esimerkki 4

Hanki "myDIV"-elementin luokan nimi:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Olen myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Kokeile itse

Esimerkki 5

Hae elementin ensimmäinen luokka:

let className = element.classList.item(0);

Kokeile itse

Esimerkki 6

Onko elementillä "myStyle"-luokka?

let x = element.classList.contains("myStyle");

Kokeile itse

Esimerkki 7

Jos elementillä on "myStyle"-luokka, poista "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Kokeile itse

Esimerkki 8

Vaihda luokkien välillä, jotta luodaan pudotusvalitsin:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Kokeile itse

Esimerkki 9

Luo liukuvainen navigaatiovalikko:

// Hae navigaatiovalikko
const navbar = document.getElementById("navbar");
// Hae navigaatiovalikon sijainti
const sticky = navbar.offsetTop;
// Lisää sticky-luokka navigaatiovalikkoon, kun saavutetaan sen scrollin sijainti
// Poista scrollin sijainti, kun siirrytään
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Kokeile itse