DOMTokenList

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
DOMTokenListChrome Support complet 8Edge Support complet 12Firefox Support complet 3IE Support complet 10Opera Support complet 11.5Safari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11.5Safari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
addChrome Support complet 8Edge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
containsChrome Support complet 8Edge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
entriesChrome Support complet 42Edge Support complet 16Firefox Support complet 50IE Aucun support NonOpera Support complet 32Safari Support complet 10.1WebView Android Support complet 45Chrome Android Support complet 45Firefox Android Support complet 50Opera Android Support complet 32Safari iOS Support complet 10.3Samsung Internet Android Support complet 5.0
forEachChrome Support complet 42Edge Support complet 16Firefox Support complet 50IE Aucun support NonOpera Support complet 32Safari Support complet 10.1WebView Android Support complet 45Chrome Android Support complet 45Firefox Android Support complet 50Opera Android Support complet 32Safari iOS Support complet 10.3Samsung Internet Android Support complet 5.0
itemChrome Support complet 8Edge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
keysChrome Support complet 42Edge Support complet 16Firefox Support complet 50IE Aucun support NonOpera Support complet 32Safari Support complet 10.1WebView Android Support complet 45Chrome Android Support complet 45Firefox Android Support complet 50Opera Android Support complet 32Safari iOS Support complet 10.3Samsung Internet Android Support complet 5.0
lengthChrome Support complet 8Edge Support complet 12Firefox Support complet 50IE Support complet 10Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet 50Opera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
removeChrome Support complet 8Edge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
Removes duplicatesChrome Support complet 60Edge Support complet 17Firefox Support complet 55IE Aucun support NonOpera Support complet 47Safari Support complet 10WebView Android Support complet 60Chrome Android Support complet 60Firefox Android Support complet 55Opera Android Support complet 44Safari iOS Support complet 10Samsung Internet Android Support complet 8.0
replaceChrome Support complet 61Edge Support complet 17Firefox Support complet 49IE Aucun support NonOpera Support complet 48Safari Support complet 10.1WebView Android Support complet 61Chrome Android Support complet 61Firefox Android Support complet 49Opera Android Support complet 45Safari iOS Support complet 10.3Samsung Internet Android Support complet 8.0
supports
Expérimentale
Chrome Support complet 49Edge Support complet 17Firefox Support complet 49IE Aucun support NonOpera Support complet 36Safari Support complet 10.1WebView Android Support complet 49Chrome Android Support complet 49Firefox Android Support complet 49Opera Android Support complet 36Safari iOS Support complet 10.3Samsung Internet Android Support complet 5.0
toggleChrome Support complet 8Edge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet 3Chrome Android Support complet 18Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet 1.0
Trims whitespaceChrome Support complet 48Edge Support complet 12Firefox Support complet 51IE Support complet 10Opera Support complet 35Safari Support complet 10WebView Android Support complet 48Chrome Android Support complet 48Firefox Android Support complet 51Opera Android Support complet 35Safari iOS Support complet 10Samsung Internet Android Support complet 5.0
valueChrome Support complet 50
Notes
Support complet 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge Support complet 17Firefox Support complet 47IE Aucun support NonOpera Support complet 37
Notes
Support complet 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari Support complet 10WebView Android Support complet 50
Notes
Support complet 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Chrome Android Support complet 50
Notes
Support complet 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Firefox Android Support complet 47Opera Android Support complet 37
Notes
Support complet 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS Support complet 10Samsung Internet Android Support complet 5.0
Notes
Support complet 5.0
Notes
Notes Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList interface.
valuesChrome Support complet 42Edge Support complet 16Firefox Support complet 50IE Aucun support NonOpera Support complet 32Safari Support complet 10.1WebView Android Support complet 45Chrome Android Support complet 45Firefox Android Support complet 50Opera Android Support complet 32Safari iOS Support complet 10.3Samsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi