DOMTokenList
L'interface DOMTokenList
représente un ensemble de marques (« token ») 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 renvoietrue
. 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
Specification |
---|
DOM Standard # interface-domtokenlist |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
DOMSettableTokenList
: un objet qui étendDOMTokenList
avec une propriété .value modifiable