HTML DOMTokenList reference manual

DOMTokenList

DOMTokenList It is a set of space-separated tokens.

You can access the DOMTokenList by index (starting from 0).

length propertyReturns the number of tokens in the DOMTokenList.

Note:Of an HTML element classList propertyRepresents a DOMTokenList.

DOMTokenList properties and methods

Name Description
add() Add one or more tokens to the list.
contains() Returns true if the list contains a class.
entries() Return an iterator with key/value pairs from the list.
forEach() Voer een callbackfunctie uit voor elk token in de lijst.
item() Geef het token op de gespecificeerde index terug.
keys() Geef een iterator terug met de keys in de lijst.
length Geef het aantal tokens in de lijst terug.
remove() Verwijder een of meerdere tokens uit de lijst.
replace() Vervang een token in de lijst.
supports() Geef true terug als het token ondersteund wordt door de eigenschap.
toggle() Schakel tussen de tokens in de lijst.
value Geef de lijst van tokens terug als een string.
values() Geef een iterator terug met de waarden uit de lijst.

Voorbeeld

Voorbeeld 1

Voeg de klasse "myStyle" toe aan het element:

Voeg de klasse "myStyle" toe aan het element:

Probeer het zelf

Voorbeeld 2

Verwijder de klasse "myStyle" van het element:

element.classList.remove("myStyle");

Probeer het zelf

Voorbeeld 3

Open en sluit "myStyle":

element.classList.toggle("myStyle");

Probeer het zelf

Meer voorbeelden worden onderaan de pagina aangeboden.

Niet een array

DOMTokenList is geen array!

DOMTokenList ziet eruit als een array, maar dat is niet het geval.

Je kunt DOMTokenList doorlopen en gebruik indices om de tokens te refereren.

Maar je kunt geen arraymethoden zoals push(), pop() of join() gebruiken op DOMTokenList.

Voorbeeld

Voorbeeld 1

Voeg meerdere klassen toe aan het element:

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

Probeer het zelf

Voorbeeld 2

Verwijder meerdere klassen van het element:

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

Probeer het zelf

Voorbeeld 3

Haal het aantal classnamen van het element op:

let numb = element.classList.length;

Probeer het zelf

Voorbeeld 4

Haal de classnaam van het element "myDIV" op:

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

Probeer het zelf

Voorbeeld 5

Haal de eerste klasse van het element op:

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

Probeer het zelf

Voorbeeld 6

Heeft het element de "myStyle" klasse?

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

Probeer het zelf

Voorbeeld 7

Verwijder "anotherClass" als het element de "myStyle" klasse heeft:

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

Probeer het zelf

Voorbeeld 8

Schakel tussen klassen om een dropdown knop te maken:

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

Probeer het zelf

Voorbeeld 9

Maak een hechte navigatiebalk:

// Haal de navigatiebalk op
const navbar = document.getElementById("navbar");
// Haal de offsetpositie van de navigatiebalk op
const sticky = navbar.offsetTop;
// Voeg de sticky klasse toe aan de navigatiebalk wanneer je de scrollpositie bereikt
// Verwijder het wanneer je de scrollpositie verlaat
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Probeer het zelf