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的使用和区别的更多相关文章

  1. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  2. javascript高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  3. 重要选择器querySelector和querySelectorAll

    他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...

  4. 高级选择器querySelector和querySelectorAll

    Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...

  5. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  6. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. 原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  8. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  9. HTML5中类jQuery选择器querySelector和querySelectorAll的使用

    支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...

随机推荐

  1. Android随

    Android的UI也是线程不安全的,如果想要更新应用程序里的UI元素,则必须在主线程中进行,否则就会出现异常.   Android中的异步消息处理机制主要由四个部分组成,Message,Handle ...

  2. 关于java对Excel的读取

    /*注意:读取的Excel文件 请另存为2003版本的Excel,否则可能会报错别忘记导入第三方的jar包*/package com.zzp.ExcelParse;import jxl.Cell;im ...

  3. Leetcode 详解(Implement strstr)

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  4. JavaEE MyBatis

    1.  简介 MyBatis本是apache的一个开源项目iBatis的升级版,2013年11月迁移到Github,是三层架构中持久层框架. 目前提供了Java..NET.以及Ruby三种语言实现的版 ...

  5. 2015年最好的PHP框架调查统计

    2015年最流行的框架,Laravel框架获得赢家! 正如预期的那样,Laravel这次又一次高出了一大截. 有一些人可能会担心,部分框架分裂版本可能影响Laravel的调查结果,并给它一个不公平的优 ...

  6. learn python, ref, diveintopython 分类: python 2015-07-22 14:42 14人阅读 评论(0) 收藏

    for notes of learing python. // just ignore the ugly/wrong highlight for python code. ""&q ...

  7. 3D图形图像处理软件HOOPS介绍及下载

    HOOPS 3D Application Framework(以下简称HOOPS)是建立在OpenGL.Direct3D等图形编程接口之上的更高级别的应用程序框架.不仅为您提供强大的图形功能,还内嵌了 ...

  8. JS实现登陆验证的主要代码及思路

    window.onload = function(){ // 获取input标签 var alInput = document.getElementsByTagName("input&quo ...

  9. 【转】查看java类是从哪个包加载

    Java的类装载器使用的是优先策略,加载类的时候先找到哪个就加载哪个.有时候我们做一个系统,当类库非常庞大的时候,类可能会出现冲突,也就是类路径中存在不同版本的两个相同的类,这往往给调试带来非常大的麻 ...

  10. Android Service提高

    我们从以下几个方面来了解Service IntentService的使用 Service与Thread的区别 Service生命周期 前台服务 服务资源被系统以外回收处理办法 不被销毁的服务 Inte ...