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 ...
随机推荐
- Python：循环语句
while 在某种条件下,执行某段程序 >>> w=0 >>> while w<5: ... print 'w :',w ... w=w+1 ... w : ...
- Objective－C（ Foundation框架 一 NSFileManager）
NSFileManager 用来管理文件系统的 它可以用于常见的文件,文件夹操作(拷贝,剪切,创建) NSFileManager使用了单例模式(Singleton) 使用defaultManager可 ...
- 获取checkbox后面的文本内容
http://alygle.blog.51cto.com/1922399/669040 <head> <meta http-equiv="Content-Type" ...
- WPF附加属性
附加属性实质也是依赖属性,是说一个属性本来不属于某个对象,但由于某种需求被后来附加上的,也就是说把对象放入一个特定环境后才具有的属性 例子:人在学校有年纪和班级两个属性,人放在学校里会获得年级和班级两 ...
- 读写CSV文件
var allFiles = Directory.GetFiles(@"D:\uploadpdf", "*.csv"); string dataIsNull = ...
- js调用.net后台事件、后台调用前台以及js调用服务器控件
1. javaScript函数中执行C#代码中的函数: 方法一:间接触发后台代码 1.首先建立一个服务端控件按钮命名为btn1,双击进入后台将调用或处理的内容写入btn1_click中; 2.在前台写 ...
- mysql与sqlserver之间的关系转换
sqlserver中的数据类型与mysql之间的对应 --sqlserver = 只复制表结构 = 复制表结构和表数据 --mysql create table xx like xx; 只复制表结构 ...
- javascript运算符与表达式
表达式 表达式是关键字.运算符.变量以及文字的组合,用来生成字符串.数字或对象.一个表达式可以完成计算.处理字符.调用函数.或者验证数据等操作. 表达式的值是表达式运算的结果,常量表达式的值就是常量本 ...
- widows下node.js环境搭建及运行js
昨天刚刚开始学习node.js,网上一些教程不是很清楚,所以总结一下我的经验. 1.安装. 安装省略,就到官网上去下载安装一下就好.安装完成之后,打开cmd,输入"path",查看 ...
- 带转义符的json解释
1.json数组:jsonData.取json数组中message的appid的值.例子: var jsonData = { "code":"200", &qu ...