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

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

　　要获取返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法，小例子如下。

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

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

以上就是HTML5实战与剖析之CSS选择器——querySelectorAll()的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于HTML5实战与剖析之CSS选择器——querySelectorAll()的详细内容...