DOMTokenList

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

L'interfaceDOMTokenList représente un ensemble de marques (« token ») séparées par un espace. On obtient un tel ensemble grâce aux propriétésElement.classList,HTMLLinkElement.relList,HTMLAnchorElement.relList ouHTMLAreaElement.relList. Les positions de cette liste sont numérotées à partir de 0.DOMTokenList est toujours sensible à la casse.

Propriétés

DOMTokenList.lengthLecture seule: Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.
DOMTokenList.valueLecture seule: retourne la valeur de la liste comme uneDOMString(chaîne de caractères).

Méthodes

DOMTokenList.item(): renvoie un élément de la liste à partir de son index (ouundefined lorsque le nombre passé est supérieur ou égal à la longueur de la liste).
DOMTokenList.contains(): renvoietrue(vrai) si la chaîne de caractères contient la marque(token) passée en argument,false(faux) sinon.
DOMTokenList.add(): ajoute une marque à la chaîne sous-jacente.
DOMTokenList.remove(): retire une marque de la chaîne sous-jacente.
DOMTokenList.replace(): remplace une marque existant par une nouvelle.
DOMTokenList.supports(): renvoietrue(vrai) si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.
DOMTokenList.toggle(): retire une marque de la chaîne de caractères sous-jacente et renvoiefalse. Si la marque n'existe pas, elle est ajoutée et la méthode renvoietrue.
DOMTokenList.entries(): renvoie unitérateur qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.
DOMTokenList.forEach(): exécute une fonction pour chaque élément de laDOMTokenList.
DOMTokenList.keys(): renvoie unitérateur qui permet de parcourir l'ensemble des clés contenues dans cet objet.
DOMTokenList.values(): renvoie unitérateur qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.

Exemples

Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément<p> en tant queDOMTokenList en utilisantElement.classList, ajoutons une classe en utilisantDOMTokenList.add(), puis mettons à jour leNode.textContent du<p> pour qu'il soit égal à laDOMTokenList.

D'abord HTML :

html

<p></p>

Puis Javascript :

var para = document.querySelector("p");var classes = para.classList;para.classList.add("d");para.textContent = 'paragraph classList is "' + classes + '"';

La sortie ressemble à ceci :

Découpage des espaces et suppression des doublons

Les méthodes qui modifient laDOMTokenList (commeDOMTokenList.add()) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :

html

<span></span>

var span = document.querySelector("span");var classes = span.classList;span.classList.add("x");span.textContent = 'span classList is "' + classes + '"';

La sortie ressemble à ceci :