HTML5实战与剖析之CSS选择器——querySelectorAll()-H5教程-PHP中文网

HTML5实战与剖析之CSS选择器——querySelectorAll()

黄舟

发布： 2017-02-10 14:45:45

原创

2282人浏览过

　　之前，我们介绍了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";
}

登录后复制

　　如果在querySelectorAll()方法的参数中传入了浏览器不支持的选择符或者选择符中存在语法错误，那么querySelectorAll()方法会报出错误。

　　HTML5实战与剖析之CSS选择器——querySelectorAll()就为大家介绍到这里，querySelectorAll()方法仅仅是HTML5中的小小部分。在学习HTML5的道路上，我们消化每个小小的知识，一步一个脚印走向终点。感谢大家对梦龙小站的支持，HTML5实战与剖析还在继续，欢迎大家继续追踪。

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