Manuel de référence HTML DOMTokenList

DOMTokenList

DOMTokenList C'est un ensemble de jetons séparés par des espaces.

On peut accéder à DOMTokenList par index (commençant à 0).

Propriété lengthRetourne le nombre de jetons dans DOMTokenList.

Remarque :HTML élément Propriété classListReprésente DOMTokenList.

Propriétés et méthodes de DOMTokenList

Nom Description
add() Ajoute un ou plusieurs jetons à la liste.
contains() Retourne true si la liste contient une classe.
entries() Retourne un itérateur avec paires clé/valeur à partir de la liste.
forEach() Exécuter une fonction de rappel pour chaque jeton de la liste.
item() Retourner le jeton à l'indice spécifié.
keys() Retourner un itérateur contenant les clés de la liste.
length Retourner le nombre de jetons dans la liste.
remove() Supprimer un ou plusieurs jetons de la liste.
replace() Remplacer un jeton dans la liste.
supports() Retourner true si le jeton est l'un des jetons pris en charge par l'attribut.
toggle() Basculer entre les jetons de la liste.
value Retourner la liste des jetons sous forme de chaîne.
values() Retourner un itérateur avec les valeurs de la liste.

Instance

Exemple 1

Ajouter la classe "myStyle" à l'élément:

element.classList.add("myStyle");

Essayez-le vous-même

Exemple 2

Supprimer la classe "myStyle" de l'élément:

element.classList.remove("myStyle");

Essayez-le vous-même

Exemple 3

Ouvrir et fermer "myStyle":

element.classList.toggle("myStyle");

Essayez-le vous-même

Plus d'exemples sont fournis en bas de la page.

Pas une array

DOMTokenList n'est pas une array !

DOMTokenList peut sembler comme une array, mais ce n'est pas le cas.

Vous pouvez itérer sur DOMTokenList et utiliser des indices pour ses jetons.

Mais vous ne pouvez pas utiliser des méthodes Array sur DOMTokenList, comme push(), pop() ou join().

Instance

Exemple 1

Ajouter plusieurs classes à l'élément:

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

Essayez-le vous-même

Exemple 2

Supprimer plusieurs classes de l'élément:

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

Essayez-le vous-même

Exemple 3

Obtenir le nombre de classes de l'élément:

let numb = element.classList.length;

Essayez-le vous-même

Exemple 4

Obtenir le nom de classe de l'élément "myDIV":

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

Essayez-le vous-même

Exemple 5

Obtenez la première classe de l'élément :

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

Essayez-le vous-même

Exemple 6

L'élément a-t-il la classe "myStyle" ?

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

Essayez-le vous-même

Exemple 7

Supprimez "anotherClass" si l'élément a la classe "myStyle" :

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

Essayez-le vous-même

Exemple 8

Basculer entre les classes pour créer un bouton déroulant :

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

Essayez-le vous-même

Exemple 9

Créer une navigation collante :

// Obtenez la barre de navigation
const navbar = document.getElementById("navbar");
// Obtenez la position d'offset de la barre de navigation
const sticky = navbar.offsetTop;
// Ajoutez la classe sticky à la barre de navigation lorsque vous atteignez sa position de défilement
// Supprimez le élément cuando se desplace fuera de la posición de desplazamiento
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Essayez-le vous-même