Les DOM » Liste de jetons » contient de nombreuses propriétés ou méthodes accessibles à l'utilisateur final en fonction de ses besoins. Les propriétés et méthodes fournies par cette liste effectuent des opérations spécifiques sur les ensembles de données fournis et renvoient le résultat en conséquence. Cela ressemble plus à un tableau car il comporte différents membres qui peuvent être sélectionnés par leur index et, tout comme un tableau, le premier index est ' 0 ». Mais vous ne pouvez pas utiliser des méthodes comme « pop()', 'push()' ou 'join() ».
Ce blog expliquera le fonctionnement des objets HTML DOMTokenList par JavaScript.
Comment travailler avec des objets JavaScript HTML DOMTokenList ?
Le HTML DOMTokenList n'est rien en soi et sa valeur est simplement due aux propriétés et méthodes qui y résident. Examinons ces propriétés et méthodes en détail ainsi qu'une mise en œuvre appropriée.
Méthode 1 : méthode Add()
Le ' Ajouter () » attache ou attribue de nouvelles classes, propriétés ou jetons simples à l'élément sélectionné. Sa syntaxe est indiquée ci-dessous :
htmlElement. ajouter ( unOuPlusJeton )
Sa mise en œuvre s'effectue à travers le code suivant :
< tête >
< style >
.taille de police{
taille de police : grande ;
}
.couleur{
couleur de fond : bleu cadet ;
couleur : fumée blanche ;
}
< / style >
< / tête >
< corps >
< h1 style = 'couleur : bleu cadet ;' > Linux < / h1 >
< bouton sur clic = 'action()' > Additionneur < / bouton >
< p > Appuyez sur le bouton ci-dessus pour appliquer le style < / p >
< div identifiant = 'choisi' >
< p > Je suis le texte sélectionné. < / p >
< / div >
< scénario >
fonction action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / scénario >
< / corps >
L'explication du code ci-dessus est la suivante :
- Tout d’abord, sélectionnez deux classes CSS « taille de police ' et ' color ' et attribuez-leur des propriétés CSS aléatoires comme ' taille de police', 'couleur d'arrière-plan' et 'couleur ».
- Ensuite, créez des boutons en utilisant le « < bouton >' balise qui invoque le ' action () » à l’aide de la touche « sur clic 'Écouteur d'événement.
- De plus, créez un parent ' div ' élément et attribuez-lui un identifiant de ' choisi ' et insérez des données factices à l'intérieur.
- Après cela, définissez le « action ()” et stocke la référence de l’élément sélectionné en accédant à son identifiant unique.
- Enfin, utilisez le « liste de classes ' propriété pour attribuer les classes et joindre le ' ajouter ()' méthode. Ensuite, passez les classes CSS à l’intérieur de cette parenthèse de méthode et elle appliquera ces classes à l’élément sélectionné.
La sortie après la compilation du code ci-dessus est générée comme :
Le gif ci-dessus confirme que les classes CSS ont été affectées à un élément sélectionné via le « ajouter ()' méthode.
Méthode 2 : méthode Remove()
Cette méthode supprime la classe ou l'identifiant spécifique d'un ou plusieurs éléments sélectionnés, comme indiqué dans le code ci-dessous :
< tête >< style >
.taille de police {
Police de caractère- taille : grand;
}
. couleur {
arrière-plan- couleur : bleu cadet;
couleur : fumée blanche;
}
< / style >
< / tête >
< corps >
< h1 style = 'couleur : bleu cadet ;' > Indice Linux < / h1 >
< bouton sur clic = 'action()' >Additeur< / bouton >
< p >Appuyez sur le bouton ci-dessus pour appliquer le style< / p >
< div identifiant = 'choisi' classe = 'Couleur Taille de police' >
< p >Je suis Choisi Texte .< / p >
< / div >
< scénario >
fonction action ( ) {
document.getElementById ( 'choisi' ) .classList.remove ( 'couleur' ) ;
}
< / scénario >
< / corps >
La description du code ci-dessus est la suivante :
- Dans un premier temps, le code expliqué dans le code ci-dessus est utilisé ici à titre d'exemple.
- Ici, à la fois le ' couleur ' et ' taille de police ' Les classes sont directement affectées à l'élément sélectionné.
- Après cela, à l'intérieur du ' action ()' fonction qui est invoquée par le ' sur clic ' écouteur d'événement le ' retirer () » la méthode de jeton est utilisée.
- Cette méthode prend une ou plusieurs classes qui vont être supprimées de l'élément sélectionné. Dans notre cas, le « couleur ' La classe va être supprimée de l'élément HTML sélectionné.
La sortie du code ci-dessus s'affiche comme suit :
Le résultat ci-dessus montre que la classe CSS spécifique a été supprimée de l'élément sélectionné à l'aide de la méthode « remove() ».
Méthode 3 : méthode Toggle()
Le ' basculer () » est la combinaison des deux « ajouter ()' et ' retirer () ». Il attribue d'abord la classe CSS fournie à l'élément HTML sélectionné, puis le supprime en fonction des actions de l'utilisateur.
< HTML >< tête >
< style >
.taille de police {
Police de caractère- taille : xx-large;
}
. couleur {
arrière-plan- couleur : bleu cadet;
couleur : fumée blanche;
}
< / style >
< / tête >
< corps >
< h1 style = 'couleur : bleu cadet ;' > Indice Linux < / h1 >
< bouton sur clic = 'action()' >Additeur< / bouton >
< p >Appuyez sur le bouton ci-dessus pour appliquer le style< / p >
< div identifiant = 'choisi' >
< p >Je suis Choisi Texte .< / p >
< / div >
< scénario >
fonction action ( ) {
document.getElementById ( 'choisi' ) .classList.toggle ( 'taille de police' ) ;
}
< / scénario >
< / corps >
< / HTML >
Une description du code ci-dessus est indiquée ci-dessous :
- Le même programme est utilisé comme celui utilisé dans la section ci-dessus, seul le ' basculer () » est remplacée par la méthode « retirer ()' méthode.
A la fin de la phase de compilation, le résultat sera le suivant :
Le résultat montre que la classe CSS spécifique est ajoutée et supprimée en fonction de l'action de l'utilisateur.
Méthode 4 : méthode Contains()
Le ' contient () » est utilisée pour vérifier la disponibilité de classes CSS spécifiques sur l'élément HTML et son implémentation est indiquée ci-dessous :
< scénario >fonction action ( ) {
laisse x = document. getElementById ( 'choisi' ) . liste de classes . contient ( 'taille de police' ) ;
document. getElementById ( 'test' ) . intérieurHTML = X ;
}
scénario >
La partie HTML et CSS reste la même. Uniquement dans le « < scénario >', la méthode 'contains()' est appliquée sur l'élément sélectionné pour vérifier si le ' taille de police » est appliqué ou non à cet élément. Ensuite, le résultat est affiché sur la page web sur un élément HTML ayant un identifiant « test ».
Après la compilation du code ci-dessus, la page Web apparaît comme ceci :
La sortie montre que la valeur de « vrai ' est renvoyé, ce qui signifie que la classe CSS spécifique est appliquée sur l'élément HTML sélectionné.
Méthode 5 : méthode Item()
Le ' article () » sélectionne le jeton ou la classe CSS en fonction de son numéro d’index, en commençant par « 0 ', comme indiqué ci-dessous:
< corps >< style h1 = 'couleur : bleu cadet ;' > Linux h1 >
< bouton surcliquez = 'action()' > Vérificateur bouton >
< p > Le CSS classe qui est attribué en premier , est récupéré : p >
< identifiant h3 = 'cas d'utilisation' classe = 'premierCls deuxièmeCls troisièmeCls' > h3 >
< scénario >
fonction action ( ) {
laissez démoListe = document. getElementById ( 'cas d'utilisation' ) . liste de classes . article ( 0 ) ;
document. getElementById ( 'cas d'utilisation' ) . intérieurHTML = liste de démonstration ;
}
scénario >
corps >
Explication du code ci-dessus :
- Tout d’abord, plusieurs classes CSS sont attribuées à notre élément sélectionné avec un identifiant de « cas d'utilisation » et la méthode « action() » qui est invoquée via le « sur clic ' événement.
- Dans cette fonction, le « article () » avec un indice de « 0 ' est attaché à l'élément sélectionné. Le résultat est stocké dans la variable ' liste de démonstration ' qui est ensuite imprimé sur la page Web à l'aide du ' intérieurHTML ' propriété.
Une fois la compilation terminée, le résultat se présente comme suit :
La sortie affiche le nom de la classe CSS qui s'applique d'abord à l'élément sélectionné et est récupérée.
Méthode 6 : propriété de longueur
Le ' longueur 'La propriété tokenList renvoie le nombre d'éléments ou de classes attribuées qui sont appliqués sur l'élément sélectionné. Le processus de mise en œuvre est indiqué ci-dessous :
< scénario >fonction action ( ) {
laissez-les démolir = document. getElementById ( 'cas d'utilisation' ) . liste de classes . longueur ;
document. getElementById ( 'cas d'utilisation' ) . intérieurHTML = démolir ;
}
scénario >
Dans le bloc de code ci-dessus :
- Premièrement la ' longueur ' la propriété est attachée au ' liste de classes ' pour récupérer le nombre de classes attribuées à l'élément sélectionné.
- Ensuite, le résultat de la propriété est stocké dans la variable « démolir ' qui sera affiché sur la page Web sur un élément avec un identifiant de ' cas d'utilisation ».
- Le reste du code reste le même que dans la section ci-dessus.
La sortie générée après la compilation est indiquée ci-dessous :
La sortie renvoie les classes appliquées sur l'élément.
Méthode 7 : méthode Remplacer()
Le ' remplacer () » est celle qui prend au moins deux paramètres et remplace le premier paramètre par le deuxième paramètre pour l'élément sélectionné, comme indiqué ci-dessous :
< scénario >fonction action ( ) {
laissez démoListe = document. getElementById ( 'cas d'utilisation' ) . liste de classes . remplacer ( 'taille de police' , 'couleur' ) ;
}
scénario >
Ici, le CSS « taille de police « la classe est remplacée par le CSS » couleur ' classe pour un élément avec un identifiant de ' cas d'utilisation ». Le reste du code HTML et CSS reste le même que dans les sections ci-dessus.
Après avoir modifié le ' scénario ' et en compilant le fichier HTML principal, le résultat ressemble à ceci :
Le résultat montre que la classe CSS spécifique a été remplacée par une autre classe.
Méthode 8 : propriété de valeur
Le ' valeur ' La propriété de liste de jetons récupère les valeurs requises attribuées à l'élément HTML sélectionné. Lorsqu'il est attaché à côté du ' liste de classes ', les classes affectées aux éléments sélectionnés sont récupérées, comme démontré ci-dessous :
< scénario >fonction action ( ) {
laissez démoVal = document. getElementById ( 'cas d'utilisation' ) . liste de classes . valeur ;
document. getElementById ( 'imprimer' ) . intérieurHTML = démoVal ;
}
scénario >
Description de l'extrait de code indiqué ci-dessus :
- À l'intérieur de ' action ()', le corps de fonction ' valeur ' La propriété est attachée à côté du ' liste de classes ' pour récupérer toutes les classes attribuées aux éléments HTML sélectionnés.
- Ensuite, le résultat de la propriété ci-dessus est stocké dans une variable « démoVal ' et inséré sur l'élément ayant un identifiant de ' print '.
Après la fin de la phase de compilation, la sortie sur une page Web est générée comme suit :
La sortie affiche le nom des classes CSS appliquées à l'élément sélectionné.
Conclusion
L'objet HTML DOM TokenList est comme un tableau stockant plusieurs méthodes et propriétés utilisées pour appliquer des fonctionnalités spécifiques sur l'élément HTML fourni. Certaines des méthodes les plus importantes et les plus largement utilisées fournies par TokenList sont « add()', 'remove()', 'toggle()', 'contains()', 'item()' et 'replace()' ». Les propriétés fournies par TokenList sont « longueur ' et ' valeur ». Cet article a expliqué la procédure pour travailler avec l'objet JavaScript HTML DOMTokenList.