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

Propriétés

DOMTokenList.length Lecture seule
Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.
DOMTokenList.value Lecture seule
retourne la valeur de la liste comme une DOMString  (chaîne de caractères).

Méthodes

DOMTokenList.item()
renvoie un élément de la liste à partir de son index (ou undefined lorsque le nombre passé est supérieur ou égal à la longueur de la liste).
DOMTokenList.contains()
renvoie true (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()
renvoie true (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 renvoie false. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie true.
DOMTokenList.entries()
renvoie un ité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 la DOMTokenList.
DOMTokenList.keys()
renvoie un itérateur qui permet de parcourir l'ensemble des clés contenues dans cet objet.
DOMTokenList.values()
renvoie un ité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 que DOMTokenList en utilisant  Element.classList, ajoutons une classe en utilisant  DOMTokenList.add(), puis mettons à jour le Node.textContent du <p> pour qu'il soit égal à la  DOMTokenList.

D'abord HTML :

<p class="a b c"></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 la DOMTokenList (comme DOMTokenList.add()) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :

<span class="    d   d e f"></span>
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span classList is "' + classes + '"';

La sortie ressemble à ceci :

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'DOMTokenList' dans cette spécification.
Standard évolutif Définition initiale

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui Oui10 Oui Oui
replace61 ?49 ?48 Oui
supports50 ?49 Non Oui ?
Trimming of whitespace and removal of duplicates Oui ?55 Oui1 Oui Oui
length Oui1250 ? Oui ?
value Oui ? Oui ? Oui Oui
item Oui12 Oui10 Oui Oui
contains Oui12 Oui10 Oui Oui
add Oui12 Oui10 Oui Oui
remove Oui12 Oui10 Oui Oui
toggle Oui12 Oui11 Oui Oui
entries Oui ?50 ? Oui ?
forEach Oui Non50 ? Oui ?
keys Oui ?50 ? Oui ?
values Oui ?50 ? Oui ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui Oui Oui Oui Oui
replace6161 ?4948 Oui Non
supports5050 ?49 Oui Non5.0
Trimming of whitespace and removal of duplicates ? Oui ?55 Oui Oui Oui
length Oui Oui ?50 Oui ? Oui
value Oui Oui ? Oui Oui Oui Oui
item Oui Oui ? Oui Oui Oui Oui
contains Oui Oui ? Oui Oui Oui Oui
add Oui Oui ? Oui Oui Oui Oui
remove Oui Oui ? Oui Oui Oui Oui
toggle Oui Oui ? Oui Oui Oui Oui
entries Oui Oui ?50 Oui ? Oui
forEach Oui Oui ?50 Oui ? Oui
keys Oui Oui ?50 Oui ? Oui
values Oui Oui ?50 Oui ? Oui

1. IE only trims whitespace — it doesn't remove duplicates.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, SphinxKnight, Hell_Carlito, P45QU10U
Dernière mise à jour par : loella16,