hibernate queryySelectorAll 方法相比 getElementsBy 系列方法有什么区别

来源：蜘蛛抓取(WebSpider) 时间：2017-09-30 09:46 标签： power query
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。&2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。&3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。&这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。var obj = document.querySelector("#id");var obj = document.querySelector(".classname");var obj = document.querySelector("div");var el = document.body.querySelector("style[type='text/css'], style:not([type])");var elements = document.querySelectorAll("#score&tbody&tr&td:nth-of-type(2)");var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");关于转义我们知道反斜杠是用来转义用的，比如在字符串里我们想表示空字符就使用'\b'，换行'\n'。同样，在提供给querySelector和querySelectorAll的参数也支持转义，了解这点非常重要。先看个例子，比如我们有个div它的样式类为'foo:bar'，当然我知道你一般不会这样写。当我们需要选择它的时候，就需要将其中的冒号进行转义，否则抛错。浏览器报怨表示不是一个合法的选择语句。同时，有趣的事情来了，或许你以为将冒号直接转义就解决问题了。同样，也表示非法。原因就在于反斜杠在字符串中本身就表示转义的意思，它于冒号结合转不出东西来，于是抛错。所以正确的做法是将反斜杠转义后'.foo\\:bar'再传递给querySelector，后者在接收到'.foo\\:bar'这个参数后，字符串将两个反斜杠转义成一个，然后querySelector前面得到的一个反斜杠与冒号结合进行转义得到正确结果。也就是说经历两次转义，一次是字符串当中，一次是querySelector解析参数时。理解这点后，可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的，我们需要一共使用四个反斜杠！才能正常工作。
阅读(114)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'js document.querySelector和querySelectorAll方法',
blogAbstract:'querySelector和querySelectorAll是W3C提供的 新的查询接口，其主要特点如下：1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。&2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。&3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。&这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。var obj = document.querySelector(\"#id\");',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}\ querySelector和getElementById方法的区别
querySelector和getElementById方法的区别
Web前端工程师
厚积而薄发
作者的热门手记
JS原生的DOM选择符想必大家应该都清楚，例如getElementById()之类的都属于常用的选择符，但是今天在看别人的代码的时候，又发现了两个原生的选择符——querySelector()和querySelectorAll()。其实也不是今天才知道这两个方法，之前就看别人用过很多次了，但是那时还以为是Jquery专用的选择符，谁让他们都有个query呢……
然后我就去查文档，发现querySelector()是用于接收一个CSS选择符，返回与该模式匹配的第一个元素；querySelectorAll()用于选择匹配到的所有元素。
完了看到这我就有点懵，所以这俩有什么用呢？不是已经有了getElementById()和getElementsByTagName()了吗，这两个新添加的选择符API意义何在？
查了《高程》并没有找到答案，最后还是百度了一堆资料，终于算是搞懂了。
简单的说，query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。
什么叫静态的？意思是指选出的所有元素的数组，不会随着文档操作而改变。
用querySelector操作元素示例如下：
HTML代码：
&li&111&/li&
&li&222&/li&
&li&333&/li&
var ul=document.querySelector('ul');
var list=ul.querySelectorAll('li');
for(var i=0;i&list.i++){
ul.appendChild(document.createElement('li'));
}//这个时候就创建了3个新的li，添加在ul列表上。
console.log(list.length) //输出的结果仍然是3，不是此时li的数量6
反观getElement方法
var ul=document.getElementsByTagName('ul')[0];
var list=ul.getElementsByTagName('li');
for(var i=0;i&5;i++){
ul.appendChild(document.createElement('li'));
console.log(list.length)//此时输出的结果就是3+5=8
所以我们现在应该可以很直观的分别出两者的区别，当然本身两种方法还有兼容性方面的区别。另外这两种方法都不能查找伪类元素。
以上也算是学到的一点新知识，虽然估计很多人都知道，但是也是记录下来增强下自己的记忆。
相关标签：
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2

我要回帖

更多关于 power query 的文章

 

随机推荐