发布网友 发布时间:2022-05-09 19:52
共4个回答
懂视网 时间:2022-05-12 08:47
之前,我们介绍了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实战与剖析还在继续,欢迎大家继续追踪。
热心网友 时间:2022-05-12 05:55
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。热心网友 时间:2022-05-12 07:13
服务器报错的英文乱码追问你真的会JQuery吗??
热心网友 时间:2022-05-12 08:47
今天看到了就一块回答了吧,从我另一个答案copy来的。
我也遇到过,官方的说法是,你把他设置成忽略这个bug,我们就要看到这个东西。(比如火狐,出现该状况时在调试器里最右边选择“忽略异常”,就可以正常过去了。)
以下原文:
As the comment by jQuery team describes:
Resolution set to notabug
Don't break on caught exceptions. We caught it because we expected it.
国*站上的说明