再谈querySelector和querySelectorAll的区别与联系

先按W3C的规范来说这两个方法应该返回的内容吧：
querySelector：

return the first matching Element node within the node's subtrees. If there is no such node, the method must return null.（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）

querySelectorAll：

return a NodeList containing all of the matching Element nodes within the node's subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. （返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）

使用方法：


代码如下:

var element = baseElement.querySelector(selectors);
var elementList = baseElement.querySelectorAll(selectors);

这在BaseElement 为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom Node），浏览器的实现就有点奇怪了，举个例子：


代码如下:

<div class="test" id="testId">
<p><span>Test</span></p>
</div>
<script type="text/javascript">
var testElement= document.getElementById('testId');
var element = testElement.querySelector('.test span');
var elementList = document.querySelectorAll('.test span');
console.log(element); // <span>Test</span>
console.log(elementList); // 1
</script>

按照W3C的来理解，这个例子应该返回：element：null；elementList：[];因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，Andrew Dupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；
Jquery的实现：


代码如下:

var oldContext = context,
old = context.getAttribute( "id" ),<BR> nid = old || id,
try {
if ( !relativeHierarchySelector || hasParent ) {
return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
}
} catch(pseudoError) {} <BR>finally {
if ( !old ) {oldContext.removeAttribute( "id" );}
}

先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id = "__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll( "[id='" + nid + "'] " + query ；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute( "id" );
，Mootools的实现：


代码如下:

var currentId = _context.getAttribute('id'), slickid = 'slickid__';
_context.setAttribute('id', slickid);
_expression = '#' + slickid + ' ' + _expression;
context = _context.parentNode;

Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；

方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;

IE 8 ：不支持baseElement为object；

非常感谢大牛JK的回复，提供了另外一种方法。

赞 (0)

相关推荐

  • js querySelector和getElementById通过id获取元素的区别

    这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5

  • jQuery选择器querySelector的使用指南

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. 复制代码 代码如下: element = document.querySelector('selectors'); elementList =

  • javascript之querySelector和querySelectorAll使用说明

    一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时. 下面是我的jsFiddle示例,我就以此展开说明: 复制代码 代码如下: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(i

  • 各浏览器中querySelector和querySelectorAll的实现差异分析

    querySelector和querySelectorAll是W3C提供的新的查询接口 querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). 3.返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果. 这两个方法都可以接受三

  • IE8下关于querySelectorAll()的问题

    当用querySelector()或querySelectorAll()查找类似name="2nd_btn"的元素时,FF,chrome和IE8都会报错. FF,chrome报的错是一样的,如下所示: Error: uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c

  • javascript之querySelector和querySelectorAll使用介绍

    一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时. 下面是我的jsFiddle示例,我就以此展开说明: js代码: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(id) {

  • 再谈querySelector和querySelectorAll的区别与联系

    先按W3C的规范来说这两个方法应该返回的内容吧: querySelector: return the first matching Element node within the node's subtrees. If there is no such node, the method must return null.(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null) querySelectorAll: return a NodeList contai

  • JS中 querySelector 与 getElementById 方法区别

    JS中 querySelector 与 getElementById 方法区别

    目录 1. 概述 1.1 querySelector() 和 querySelectorAll() 的用法 1.2 getElement(s)Byxxxx 的用法 2. 区别 2.1 getElement(s)Byxxxx 获取的是动态集合,querySelector 获取的是静态集合 2.2 接收的参数不同 2.3 浏览器兼容不同 1. 概述 在看代码的时候发现基本上都是用 querySelector() 和 querySelectorAll() 来获取元素,疑惑为什么不用 getElemen

  • javascript高级选择器querySelector和querySelectorAll全面解析

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: module dom { [Supplemental, NoInterfaceObject] i

  • 再谈Javascript中的基本类型和引用类型(推荐)

    一.基本类型和引用类型概述 js中数据类型的值包括:基本类型值和引用类型值 基本数据类型:undefined;null;boolean;number;string 引用类型值:保存在内存中,js不允许直接访问内存位置,因此时操作引用而不是实际对象 二.如何检测数据类型 1.基本数据类型的检测:使用typeof var s = "AAA"; alert(typeof s); //返回string 2.引用类型(对象类型)检测:使用instanceof alert(person insta

  • 浅谈addEventListener和attachEvent的区别

    浅谈addEventListener和attachEvent的区别

    • addEventListener共有3个参数,如下所示: element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事件的对象,及HTML节点. type 事件名称,注意去掉事件前边的"on",比如"onclick"要写成"click","onmouseover"要写成"mouseover". listener 要绑定的

  • 浅谈PrintStream和PrintWriter的区别和联系

    前言 这两者在往文件中写入字符串时,最终都需要通过字符集的映射关系得到对应字节. 但这二者在通过char得到对应若干字节的时机不一样,以new PrintStream( new BufferedOutputStream( new FileOutputStream("BasicFileOutput.out")));和new PrintWriter( new BufferedWriter( new FileWriter("BasicFileOutput.out")))为

  • 再谈Yii Framework框架中的事件event原理与应用

    本文实例讲述了Yii Framework框架中的事件event原理与应用.分享给大家供大家参考,具体如下: 再谈Yii Framework中的事件event,我写过的关于Yii事件event的另一篇文章 Yii Framework 中事件和行为的区别和应用 https://www.jb51.net/article/184208.htm 假设有类MyComponent,它是继承于CComponent,通过查看 CComponent 的 __set() 方法, public function __s

  • JVM系列之:再谈java中的safepoint说明

    safepoint是什么 java程序里面有很多很多的java线程,每个java线程又有自己的stack,并且共享了heap.这些线程一直运行呀运行,不断对stack和heap进行操作. 这个时候如果JVM需要对stack和heap做一些操作该怎么办呢? 比如JVM要进行GC操作,或者要做heap dump等等,这时候如果线程都在对stack或者heap进行修改,那么将不是一个稳定的状态.GC直接在这种情况下操作stack或者heap,会导致线程的异常. 怎么处理呢? 这个时候safepoint

  • 浅谈Synchronized和Lock的区别

    如下所示: Synchronized是内置的java关键字,Lock是一个java类. Synchronized无法判断是否获取到了锁,Lock可以判断是否获取到了锁. Synchronized会自动释放锁,Lock必须手动释放锁. Synchronized线程1获得锁之后阻塞,等待锁的线程2会一直等下去(死等).Lock不一定会死等. Synchronized可重入锁.不可中断.非公平锁.Lock是可重入锁.选择是否可中断.可以选择是否公平. Synchronized适合锁少量的代码同步问题.

  • 浅谈C语言=与==的区别详解

    在 C 语言中,最容易产生混淆的操作符要属"="与"==".其中,"="并不等于符号,而是赋值操作符,如 x=3.除此之外,还可以在一个语句中向多个变量赋同一个值,即多重赋值.例如,在下面代码中把 0 同时赋给 x.y 与 z. x = y = z = 0; 相对于只有一个等号的赋值操作符,关系操作符中的等于操作符采用两个等号"=="来表示.正因如此,导致了一个潜在的问题:出于习惯,我们可能经常将需要等于操作符的地方写成赋值操

随机推荐