Combat réel HTML5 et analyse des sélecteurs CSS - querySelectorAll()

Précédemment, nous avons introduit le sélecteur querySelector() en HTML5. Aujourd'hui, nous continuons à partager avec vous le nouveau sélecteur querySelectorAll() en HTML5.

Les paramètres reçus par la méthode querySelectorAll() sont également des sélecteurs CSS, mais tous les éléments correspondants sont renvoyés, tandis que la méthode querySelector() renvoie le premier élément correspondant.

La méthode querySelectorAll() renvoie une instance de NodeList. NodeList est une instance avec toutes les propriétés et méthodes. Son implémentation sous-jacente équivaut à un instantané d'un ensemble d'éléments, et non à une requête dynamique de recherche de documents. Cela évite les problèmes de performances généralement causés par l'utilisation d'objets NodeList.

Tant que les paramètres passés à la méthode querySelectorAll() sont valides, cette méthode renverra un objet NodeList quel que soit le nombre d'éléments trouvés. Si aucun élément correspondant n'est trouvé, la NodeList sera vide. Regardons un petit exemple pour mieux vous l'expliquer.

　Code HTML

<p id="all" class="all">
	<i>梦龙小站</i>
	<p class="box">
		<em class="span">梦龙小站</em>
	</p>
	<i class="span">梦龙小站</i>
	<p class="box">
		<em>梦龙小站</em>
	</p>
</p>

Code JavaScript

//获取类名为all的<p>中所有的<i>元素，类似于getElementsByTagName("i")
var i = document.getElementById("all").querySelectorAll("i");

//获取类名为span的所有元素
var span = document.querySelectorAll(".span");

//获取所有<p>标签中的所有<em>元素
var em = document.querySelectorAll("p em");

Pour obtenir chaque élément de la NodeList renvoyée, vous pouvez utiliser la méthode item() ou la syntaxe entre crochets. Un petit exemple est le suivant.

　Code HTML

<p id="all" class="all">
	<i>梦龙小站</i>
	<p class="box">
		<em class="span">梦龙小站</em>
	</p>
	<i class="span">梦龙小站</i>
	<p class="box">
		<em>梦龙小站</em>
	</p>
</p>

　Code JavaScript

//获取所有<p>标签中的所有<em>元素
var em = document.querySelectorAll("p em");

var i, len, emOne;
for(i=0, len = em.length; i<len; i++){
	emOne = em[i];
	//或者 em.item(i);
	emOne.className = "meng";
}

Si un sélecteur qui n'est pas pris en charge par le navigateur est transmis en tant que paramètre à la méthode querySelectorAll() ou s'il y a une erreur de syntaxe dans le sélecteur, alors la méthode querySelectorAll() signalera une erreur.

Combat réel HTML5 et analyse des sélecteurs CSS - querySelectorAll() est présenté ici La méthode querySelectorAll() n'est qu'une petite partie de HTML5. Sur le chemin de l’apprentissage du HTML5, nous digérons chaque petit élément de connaissance et avançons vers la fin, étape par étape. Merci pour votre soutien à Menglong Station. Le combat et l'analyse de HTML5 se poursuivent. Vous êtes invités à continuer à suivre.

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