HTML5實戰與剖析之CSS選擇器－querySelectorAll()

在

　　之前，我們介紹了HTML5中的選擇器querySelector()。今天，我們繼續為大家分享HTML5中新加入的選擇器querySelectorAll()。

　　querySelectorAll()方法接收的參數也是CSS選擇符，但是回傳的是所有符合元素，而querySelector()方法回傳的是第一個符合的元素。

　　querySelectorAll()方法傳回的是一個NodeList的實例。 NodeList是帶有所有屬性和方法的實例。其底層實作相當於一組元素的快照，並非文件進行搜尋的動態查詢。這樣可以避免使用NodeList物件通常會造成的效能問題。

　　只要給querySelectorAll()方法中傳的參數是有效的，這個方法不管找到的元素有多少個都會傳回一個NodeList物件。如果沒有找到符合的元素，NodeList就會是空的。下面看一個小例子更好的為大家說明。

　　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>

JavaScript程式碼

JavaScript密碼㟎

🀜號文法，小例子如下。 　　HTML代碼

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

　　〜〜

　　

了瀏覽器不支援的選擇符或選擇符中存在語法錯誤，那麼querySelectorAll()方法會報出錯誤。

　　HTML5實戰與剖析之CSS選擇器－querySelectorAll()就為大家介紹到這裡，querySelectorAll()方法僅僅是HTML5中的小小部分。在學習HTML5的道路上，我們消化每個小小的知識，一步一腳印走向終點。感謝大家對夢龍小站的支持，HTML5實戰與剖析仍在繼續，歡迎大家繼續追蹤。

以上就是HTML5實戰與剖析之CSS選擇器－querySelectorAll()的內容，更多相關內容請關注PHP中文網（www.php.cn）！

🎜🎜