Tatsächlicher HTML5-Kampf und Analyse von CSS-Selektoren - querySelectorAll()

Zuvor haben wir den Selektor querySelector() in HTML5 eingeführt. Heute teilen wir Ihnen weiterhin den neu hinzugefügten Selektor querySelectorAll() in HTML5 mit.

Die von der querySelectorAll()-Methode empfangenen Parameter sind ebenfalls CSS-Selektoren, es werden jedoch alle passenden Elemente zurückgegeben, während die querySelector()-Methode das erste passende Element zurückgibt.

Die Methode querySelectorAll() gibt eine Instanz von NodeList zurück. NodeList ist eine Instanz mit allen Eigenschaften und Methoden. Die zugrunde liegende Implementierung entspricht einer Momentaufnahme einer Reihe von Elementen und nicht einer dynamischen Abfrage für die Dokumentensuche. Dadurch werden die Leistungsprobleme vermieden, die normalerweise durch die Verwendung von NodeList-Objekten verursacht werden.

Solange die an die querySelectorAll()-Methode übergebenen Parameter gültig sind, gibt diese Methode ein NodeList-Objekt zurück, unabhängig davon, wie viele Elemente gefunden werden. Wenn kein passendes Element gefunden wird, ist die NodeList leer. Schauen wir uns ein kleines Beispiel an, um es Ihnen besser zu erklären.

　HTML-Code

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

JavaScript-Code

//获取类名为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");

Um jedes Element in der zurückgegebenen NodeList abzurufen, können Sie die Methode item() oder die Syntax in eckigen Klammern verwenden. Ein kleines Beispiel ist wie folgt.

　HTML-Code

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

　JavaScript-Code

//获取所有<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";
}

Wenn im Parameter der querySelectorAll()-Methode ein Selektor übergeben wird, der vom Browser nicht unterstützt wird oder ein Syntaxfehler im Selektor vorliegt, dann wird der Die Methode querySelectorAll() meldet einen Fehler.

Tatsächlicher HTML5-Kampf und Analyse von CSS-Selektoren – querySelectorAll() wird hier vorgestellt. Die querySelectorAll()-Methode ist nur ein kleiner Teil von HTML5. Auf dem Weg zum Erlernen von HTML5 verarbeiten wir jedes noch so kleine Wissen und gehen Schritt für Schritt dem Ende entgegen. Vielen Dank für Ihre Unterstützung für Menglong Station. Der eigentliche Kampf und die Analyse von HTML5 gehen gerne weiter.

Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse des CSS-Selektors - querySelectorAll(). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn)!