HTML5 actual combat and analysis of CSS selectors - querySelectorAll()

Previously, we introduced the selector querySelector() in HTML5. Today, we continue to share with you the newly added selector querySelectorAll() in HTML5.

The parameters received by the querySelectorAll() method are also CSS selectors, but all matching elements are returned, while the querySelector() method returns the first matching element.

The querySelectorAll() method returns an instance of NodeList. NodeList is an instance with all properties and methods. Its underlying implementation is equivalent to a snapshot of a set of elements, not a dynamic query for document search. This avoids the performance issues typically caused by using NodeList objects.

As long as the parameters passed to the querySelectorAll() method are valid, this method will return a NodeList object regardless of how many elements are found. If no matching element is found, the NodeList will be empty. Let’s look at a small example to better explain it to you.

　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");

To get each element in the returned NodeList, you can use the item() method or the square bracket syntax. A small example is as follows.

　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";
}

If a selector that is not supported by the browser is passed in as a parameter to the querySelectorAll() method or there is a syntax error in the selector, the querySelectorAll() method will report an error.

HTML5 actual combat and analysis of CSS selectors - querySelectorAll() is introduced here. The querySelectorAll() method is only a small part of HTML5. On the road to learning HTML5, we digest every little piece of knowledge and move towards the end one step at a time. Thank you for your support to Menglong Station. The actual combat and analysis of HTML5 are still continuing. You are welcome to continue to follow.

The above is the content of HTML5 actual combat and analysis of CSS selector - querySelectorAll(). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!