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 ...
随机推荐
- ueditor使用小结
一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/webs ...
- 运行DbVisualizer报the java_home environment viariable does not point to a working 32-bit JDK OR JRE错误
报这个错误的根本原因就是DbVisualizer和JDK的版本不一致,那么知道原因,修改起来就方便了,要么修改DbVisualizer的版本,要么修改JDK的版本. 1.JDK7 64位 那么就在Db ...
- ios基础篇（二十六）—— UITableViewCell的分组索引与标记
一.表视图的索引目录 首先要创建一个TableView,之前有说过,这里就不详细说了(参考前面第十四篇). 直接贴代码吧, #import "ViewController.h" @ ...
- oracle Net Manager 服务命名无法配置(无法新建、添加服务名)
今天在配置oracle Net Manager 配置服务命名的时候总是无法配置,以前配置的服务名都显示不出来,然后点击绿色添加按钮也没反应,因为先前我修改了oracle\product\10.2.0\ ...
- javascript无线端的判断
经常在工作中要求网页做这样的处理判断:针对无线端的网页,我们需要兼容一种异于PC端的网页效果. 如下代码就可以实现无线端的判断: var mobs = ['android', 'ipad', 'ipo ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- "$cond"
db.items.aggregate([ { "$project": { "name": 1, "customfield": { " ...
- DeepLearning之路 (五) CNN
自今年七月份以来,一直在实验室负责卷积神经网络(Convolutional Neural Network,CNN),期间配置和使用过theano和cuda-convnet.cuda-convnet2. ...
- Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
- Bootstrap<基础九>辅助类
Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-mu ...