javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在规范中定义了如下接口：
module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥 有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
获取ID为abc的元素：
document.getElementById('abc');
//or
document.querySelector('#abc');
//or
document.querySelectorAll('#abc')[0];
获取class为abc的元素：
document.getElementByClassName('abc');
//or
document.querySelector('.abc');
//or
document.querySelectorAll('.abc')[0];
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：
<body>
<div id="test1"><a href="#">abc</a></div>
<p id="bar">111</p>
<script>
var d1 = document.getElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(obj1)//<a href="#">abc</a>
console.log(obj2.length)//1
console.log(obj3)//null
</script>
//querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
//jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身
</body>
误解就在于对d1.querySelectorAll('div a')的实现理解，不少人一开始几乎都认为是直接从div[id='test']的孩子中进行查找，实际上它还是根据selector string先从整个document上查找，再返回属于div[id='test']的子节点。很多人会疑惑，那么为什么不按照直接按父节点找子节点的 方式来实现呢？就像elem.getElementsByTagName。
querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
并且返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。
javascript选择器querySelector和querySelectorAll的使用和区别的更多相关文章
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...
- javascript高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- HTML5中类jQuery选择器querySelector和querySelectorAll的使用
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...
随机推荐
- MSDN Library for vs 2010安装及使用(MSDN Library)
VS2010正式版不再有单独的MSDN Library安装选项,VS2010的ISO安装光盘里已经包含有MSDN Library,只不过要手动安装,方法如下: 1.安装完VS2010后,在开始菜单中打 ...
- ios企业应用部署
最近公司要整一套企业内部用的应用,ios版本不上线要求可以随时下载使用,先是申请了企业者开发账号,然后发布应用,部署在自己服务器上供用户下载安装. 第一步:准备好应用相关的东西,基本上就是两个文件,x ...
- 极光推送Jpush(v3)服务端PHP版本集成（V3版本只调用推送API）
因为版本升级,极光推送的API也有了V3,功能也更丰富了,但是对于我们有的用户来说,我们还是只需要调用推送的API就够了. 下载了一份PHP服务端的SDK(下载地址:http://docs.jpush ...
- 【 2013 Multi-University Training Contest 3 】
HDU 4622 Reincarnation 枚举字符串的起点,构造后缀自动机,每次插入一个字符,就能统计得到当前不同字串的个数,预处理出所有的询问. #include<cstdio> # ...
- IE关闭兼容性视图
不知道什么时候,ie8的“兼容性视图设置”变成了灰色,如图: 今天通过设置组策略,终以解决了这个问题: ie8的兼容性视图设置灰色的解决办法:运行gpedit.msc--用户配置/计算机配置--管理 ...
- MyBatis3学习--来源自用户指南
MyBatis是什么? MyBatis 是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架. MyBatis几乎消 除了所有的JDBC 代码,也基本不需要手工去设置参数和获取检索结果. My ...
- svn图标不显示的解决方案
最近发现svn图标莫名其妙的不显示,其他操作都正常.在网上搜了一些方法. 解决方法一(失败): 升级最新版本,我的本来就是最新版本 解决方法二(失败): 右键->TortoiseSVN-> ...
- C/C++程序员常去网站
www.codeproject.comwww.codegru.comwww.chinaunix.netwww.csdn.netwww.vckbase.com http://www.google.com ...
- AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead
Typeahead指令是一个用于智能提示或自动完成的控件,就像Jquery的AutoComplete控件一样.来看一个最简单的例子: <!DOCTYPE html> <html ng ...
- Android --差缺补漏之 Intent&putExtra()
伴随着Android Developers 的开发,再也不用FQ了,这意味着Android 对中国学习者有着越来越多的官方学习资料,学习起来有更明确的方向和目标. Android Developer ...