Combat réel HTML5 et analyse de l'attribut classList

J'ai introduit quelques sélecteurs nouvellement ajoutés en HTML5, à savoir querySelector(), querySelectorAll() et getElementsByClassName(). Ces trois éléments ont leurs propres fonctions uniques. Si nécessaire, vous pouvez lire le contenu pertinent dans le combat et l'analyse réels HTML5. Aujourd'hui, je vais vous présenter l'attribut classList.

À quoi sert exactement l'attribut classList ? Laissons classList tranquille pour l'instant. Nous réfléchissons à la question suivante : comment supprimer l'un des noms de classe parmi les éléments portant plusieurs noms de classe ? Menglong a lutté avec son cerveau et a finalement trouvé un moyen d'y parvenir. Supprimez le nom de classe meng parmi les trois noms de classe li, meng et long. Le code est le suivant

　Code HTML

<p class="li meng long">梦龙小站</p>

　Code JavaScript

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

//获取类名字符串并拆分成数组
var allClassName = p.className.split(" ");

//找到要删除的类名
var i, len, 
	pos = -1;

for(i=0, len = allClassName.length; i < len; i++){
	if(allClassName[i] == "meng"){
		pos = i;
		break;
	}
}

//删除类名
allClassName.splice(pos, 1);

alert(allClassName) //li,long

//将其余的类名拼成字符串并重新添加到元素的类名中
p.className = allClassName.join(" ");

　Effet d'aperçu

Afin de le supprimer à partir du nom de classe d'élément "meng", les codes ci-dessus sont requis. Utilisez un algorithme similaire pour remplacer le nom de classe et confirmer si le nom de classe est contenu dans l'élément. Si vous ajoutez un nom de classe, vous pouvez le compléter en épissant des chaînes, mais vous devez vous assurer grâce à la détection que le même nom de classe ne sera pas ajouté plusieurs fois. De nombreuses bibliothèques JavaScript ont implémenté cette méthode pour simplifier l'opération. Pour supprimer un nom de classe, vous devez d'abord obtenir le nom de classe existant, rechercher l'emplacement où le nom de classe doit être supprimé, puis le supprimer.

Il ressort de la méthode ci-dessus que pour implémenter une simple fonction de suppression, vous devez écrire plusieurs lignes de code. Si vous ne souhaitez pas écrire plusieurs lignes de code, vous devez introduire une bibliothèque. et utilisez la méthode dans la bibliothèque. Avec HTML5, vous n'avez pas à vous inquiéter autant. Nous pouvons utiliser l'attribut classList en HTML5 pour effectuer ces étapes. Cet attribut classList est une instance du nouveau type de collection DOMTokenList. Semblable aux autres collections DOM. DOMTokenList a un attribut length qui indique le nombre d'éléments qu'il contient. Pour obtenir chaque élément, vous pouvez utiliser la méthode item() ou la syntaxe des crochets. De plus, vous trouverez ci-dessous les méthodes définies pour ce nouveau type.

1. Remove(value)

La méthode Remove(value) signifie supprimer la chaîne donnée de la liste. Un petit exemple est le suivant :

　Code HTML

<p class="li meng long">梦龙小站</p>

　Code JavaScript

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

alert(p.classList)  //li meng long

p.classList.remove("meng") 

alert("p.className: " + p.className)  //p.className: li long

　Effet d'aperçu

2. contain (value)

　La méthode contain(value) indique si une valeur donnée existe dans la liste Si elle existe, elle renvoie "true", sinon elle renvoie "false". suit :

　 Code HTML

<p class="li meng long">梦龙小站</p>

　Code JavaScript

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

alert(p.classList.contains("meng")) //true

alert(p.classList.contains("menglong")) //false

　3.add(value)

La méthode add(value) signifie que la chaîne de la liste est ajoutée à la liste. S'il existe déjà, il ne sera pas ajouté. Un petit exemple est le suivant :

　Code HTML

<p class="li meng long">梦龙小站</p>

　Code JavaScript

//添加类名 menglong

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

p.classList.add("menglong");

alert("p.className: " + p.className)  //p.className: li meng long menglong

　Effet d'aperçu

4. méthode toggle(value)

toggle(value), si la valeur donnée existe déjà dans la liste, supprimez-la si la valeur donnée n'existe pas dans la liste ; , ajoutez-le. Un petit exemple est le suivant :

　Code HTML

<p class="li meng long">梦龙小站</p>
梦龙小站

　Code JavaScript

//切换类名 meng

//获取要删除类名li的p
var p = document.getElementsByTagName("p");
var i, len;

for(i=0, len = p.length; i< len; i++){
	p[i].classList.toggle("meng");
}


alert("p[0].className: " + p[0].className)  //p[0].className: li long
alert("p[1].className: " + p[1].className)  //p[1].className: li meng long

　Effet d'aperçu

De petits exemples sur classList vous ont été présentés. Ces petites méthodes peuvent être clairement démontrées et expliquées à travers de petits exemples. Avec classList, à moins que vous n'ayez besoin de supprimer tous les noms de classe ou de réécrire complètement l'attribut de classe de l'élément, l'attribut className n'est plus nécessaire et de nombreuses méthodes pratiques sont attachées. Les navigateurs qui prennent en charge l'attribut classList incluent Firefox 3.6 et Chrome.

C'est tout pour tout le monde de présenter l'attribut classList du combat et de l'analyse réels HTML5. L'accumulation petit à petit est le succès de demain. Si vous apprenez un peu de HTML5 en une journée, vous l'apprendrez certainement avec succès un jour. . Merci de soutenir Menglong Station. Pour plus de mises à jour sur HTML5, veuillez prêter attention aux mises à jour de Menglong Station sur la pratique et l'analyse HTML5.

Ce qui précède est le contenu de l'attribut classList du combat et de l'analyse réels HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !