HTML DOMTokenList referencehåndbog

DOMTokenList

DOMTokenList Er en samling af mellemrum adskilte token.

DOMTokenList kan tilgås via index (fra 0).

length egenskabReturnerer antallet af token i DOMTokenList.

Bemærk:HTML elementets classList egenskabRepræsenterer DOMTokenList.

DOMTokenList egenskaber og metoder

Navn Beskrivelse
add() Tilføj en eller flere token til listen.
contains() Returnerer true, hvis listen indeholder en klasse.
entries() Returnerer en iterator med nøgle/værdipar fra listen.
forEach() Kjør en callback-funksjon for hvert token i listen.
item() Returner tokenet på den spesifiserte indeksen.
keys() Returner en iterator som inneholder nøklene i listen.
length Returner antallet token i listen.
remove() Fjern ett eller flere token fra listen.
replace() Erstatt token i listen.
supports() Returner true hvis token er en av de egenskapsstøttede tokenene.
toggle() Bytt mellom token i listen.
value Returner token-listen som en streng.
values() Returner en iterator med verdiene i listen.

Eksempel

Eksempel 1

element.classList.add("myStyle");

Legg til "myStyle"-klassen til elementet:

Prøv det selv

Eksempel 2

Fjern "myStyle"-klassen fra elementet:

element.classList.remove("myStyle");

Prøv det selv

Eksempel 3

Åpne og lukk "myStyle":

element.classList.toggle("myStyle");

Prøv det selv

Flere eksempler finnes nedenfor på siden.

Ikke en array

DOMTokenList er ikke en array!

DOMTokenList ser ut som en array, men det er ikke tilfelle.

Du kan traversere DOMTokenList og bruke indekser for å referere til sine tokens.

Men du kan ikke bruke array-metoder på DOMTokenList, som push(), pop() eller join().

Eksempel

Eksempel 1

Legg til flere klasser til elementet:

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

Prøv det selv

Eksempel 2

Fjern flere klasser fra elementet:

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

Prøv det selv

Eksempel 3

Få antall klassenavn til elementet:

let numb = element.classList.length;

Prøv det selv

Eksempel 4

Få klassenavnet til elementet "myDIV":

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

Prøv det selv

Eksempel 5

Få elementets første klasse

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

Prøv det selv

Eksempel 6

Har elementet "myStyle"-klassen?

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

Prøv det selv

Eksempel 7

Fjern "anotherClass", hvis elementet har "myStyle"-klassen

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

Prøv det selv

Eksempel 8

Skift mellem klasser for at oprette en dropdown-knap

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

Prøv det selv

Eksempel 9

Opret en fast navigation

// Få navigationsfeltet
const navbar = document.getElementById("navbar");
// Få navigationsfeltets afstand
const sticky = navbar.offsetTop;
// Tilføj sticky-klassen til navigationsfeltet, når du når dens rulingsposition
// Fjern det, når du forlader rulingspositionen
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Prøv det selv