Manuale di riferimento HTML DOMTokenList

DOMTokenList

DOMTokenList È un insieme di token separati da spazi.

Puoi accedere alla DOMTokenList tramite l'indice (partendo da 0).

Proprietà lengthRestituisce il numero di token nella DOMTokenList.

Nota:HTML elemento Proprietà classListRappresenta DOMTokenList.

Proprietà e metodi DOMTokenList

Nome Descrizione
add() Aggiunge uno o più token alla lista.
contains() Restituisce true se la lista contiene classi.
entries() Restituisce un iteratore con coppia di chiavi/valori dalla lista.
forEach() Eseguire una funzione di callback per ogni token nella lista.
item() Restituire il token all'indice specificato.
keys() Restituire un iteratore con le chiavi nella lista.
length Restituire il numero di token nella lista.
remove() Eliminare uno o più token dalla lista.
replace() Sostituire i token nella lista.
supports() Restituire true se il token è uno dei token supportati dall'attributo.
toggle() Cambiare tra i token nella lista.
value Restituire la lista di token come stringa.
values() Restituire un iteratore con i valori della lista.

Esempio

Esempio 1

Aggiungere la classe "myStyle" all'elemento:

element.classList.add("myStyle");

Prova tu stesso

Esempio 2

Eliminare la classe "myStyle" dall'elemento:

element.classList.remove("myStyle");

Prova tu stesso

Esempio 3

Aprire e chiudere "myStyle":

element.classList.toggle("myStyle");

Prova tu stesso

Più esempi sono forniti nella parte inferiore della pagina.

Non è un array

DOMTokenList non è un array!

DOMTokenList potrebbe sembrare un array, ma non è così.

Puoi iterare DOMTokenList e utilizzare l'indice per referenziare i suoi token.

Ma non puoi usare metodi di array su DOMTokenList, come push(), pop() o join().

Esempio

Esempio 1

Aggiungere più classi all'elemento:

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

Prova tu stesso

Esempio 2

Eliminare più classi dall'elemento:

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

Prova tu stesso

Esempio 3

Ottenere il numero di classi dell'elemento:

let numb = element.classList.length;

Prova tu stesso

Esempio 4

Ottenere il nome delle classi dell'elemento "myDIV":

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

Prova tu stesso

Esempio 5

Ottieni la prima classe dell'elemento:

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

Prova tu stesso

Esempio 6

L'elemento ha la classe "myStyle"?

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

Prova tu stesso

Esempio 7

Rimuovere "anotherClass" se l'elemento ha la classe "myStyle":

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

Prova tu stesso

Esempio 8

Cambiare tra classi per creare un pulsante a discesa:

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

Prova tu stesso

Esempio 9

Creare una barra di navigazione adesiva:

// Ottenere la barra di navigazione
const navbar = document.getElementById("navbar");
// Ottenere la posizione di scorrimento della barra di navigazione
const sticky = navbar.offsetTop;
// Aggiungere la classe sticky alla barra di navigazione quando si raggiunge la sua posizione di scorrimento
// Rimuovere l'elemento quando si lascia la posizione di scorrimento
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Prova tu stesso