Combat réel HTML5 et analyse des sélecteurs CSS - méthode getElementsByClassName()

La méthode querySelector() et la méthode querySelectorAll() en HTML5 vous ont été présentées dans les articles précédents. Je me demande dans quelle mesure vous les comprenez ? qui correspond au sélecteur CSS ; la méthode querySelectorAll() renvoie tous les éléments qui correspondent au sélecteur CSS passé, qui est un objet NodeList. Après un bref examen, permettez-moi de partager une nouvelle méthode method-getElementsByClassName().

Comme HTML4 a été largement utilisé dans le domaine du développement Web, il a conduit à de nombreux changements dans HTML4. Étant donné que les noms de classe sont largement utilisés en CSS, dans de nombreux cas, ce que vous devez obtenir lors de l'écriture de code JavaScript n'est pas l'ID mais le nom de la classe. Depuis, HTML5 a ajouté la méthode getElementsByClassName(). La méthode getElementsByClassName() peut être appelée via l'objet document et tous les éléments HTML. La méthode d'obtention du nom de classe d'un élément est apparue pour la première fois dans de nombreuses bibliothèques JavaScript. Elles sont toutes implémentées via la fonction DOM, qui consomme beaucoup de performances. Avec cette méthode native getElementsByClassName(), beaucoup de performances sont économisées.

La méthode getElementsByClassName() reçoit un paramètre, qui est également une chaîne de sélecteurs CSS, qui peuvent être un ou plusieurs. La méthode getElementsByClassName() renvoie une NodeList avec tous les éléments de la classe spécifiée. Notez que lorsque plusieurs noms de classe sont transmis, l’ordre des noms de classe n’a pas d’importance. La base théorique sera d’abord présentée ici. Jetons un coup d’œil à un petit exemple.

1. Récupérez toutes les cases de nom de classe et ajoutez un fond rouge

Code HTML

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

Code JavaScript

var allBox = document.getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i < l; i++){
	allBox[i].style.background = "red";
}

Effet d'aperçu

2. Obtenez l'élément avec la zone de nom de classe dans l'élément avec la zone de nom d'ID2 , et Ajouter un fond rouge

Code HTML

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

Code JavaScript

//获取类名是oi和op的元素，并加上红色背景
var allBox = document.getElementById("box2").getElementsByClassName("box"),	i, len;

alert(allBox[0].id) //[object NodeList]


for(i=0, l = allBox.length; i < l; i++){	allBox[i].style.background = "red";
}

Effet d'aperçu

Lors de l'appel de cette méthode, à condition que une correspondance peut être trouvée. Seuls les éléments de NodeList seront renvoyés. L’appel de la méthode getElementsByClassName() sur un objet document renvoie toujours tous les éléments correspondant au nom de la classe. L’appel de la méthode getElementsByClassName() sur un élément ne renverra que les éléments correspondants parmi les éléments descendants.

Utilisez cette méthode pour ajouter plus facilement des gestionnaires d'événements aux éléments portant certains noms de classe, de sorte que vous n'ayez plus à vous limiter à l'ajout de gestionnaires d'événements à l'aide d'ID ou de balises. Étant donné que l'objet renvoyé est une NodeList, l'utilisation de cette méthode présente les mêmes problèmes de performances que l'utilisation de la méthode getElementsByTagName() et d'autres méthodes DOM qui renvoient NodeList. Tout doit être ajouté à l’aide d’une boucle for. Par conséquent, Menglong estime qu'il y a des avantages et des inconvénients à utiliser les méthodes de la bibliothèque JavaScript pour obtenir des éléments et à utiliser la méthode getElementsByClassName() pour obtenir des éléments.

La méthode getElementsByClassName() prend en charge certains navigateurs modernes tels que IE9, Firefox3, Safari3.1, Chrome et Opera9.5.

Ceci conclut l'introduction au combat réel HTML5 et à l'analyse de la méthode CSS selector-getElementsByClassName(). Pour résumer, la méthode getElementsByClassName() utilise des méthodes natives JavaScript pour obtenir le nom de la classe d'élément. La méthode getElementsByClassName() est une méthode nouvellement ajoutée dans HTML5. Pour le contenu connexe sur HTML5, veuillez prêter attention aux mises à jour pertinentes de HTML5 sur Menglong Station. Merci à tous pour votre soutien.

Ce qui précède est le contenu de la méthode CSS selector-getElementsByClassName() dans le combat et l'analyse réels de HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !