Maison > interface Web > Tutoriel H5 > le corps du texte

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

黄舟
Libérer: 2017-02-10 14:45:45
original
1995 Les gens l'ont consulté

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>
Copier après la connexion
Copier après la connexion

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");
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

 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";
}
Copier après la connexion

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) !




source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal