再谈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的回复,提供了另外一种方法。

时间: 2012-04-19

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

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

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的实现差异分析

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示例,我就以此展开说明: 复制代码 代码如下: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(i

jQuery选择器querySelector的使用指南

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

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

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

高效jQuery选择器的5个技巧实例分析

本文实例讲述了高效jQuery选择器的5个技巧.分享给大家供大家参考,具体如下: 顾名思义,jQuery专注于查询(queries).库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素. jQuery使用浏览器原生API方法获取DOM集合.现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法).然而,老版本的浏览器可能只提供getElementById以及getElementB

jQuery选择器全集详解

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(runescape, funescape)

JQuery 选择器、过滤器介绍

今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

JQuery选择器、过滤器大整理

经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了.所有代码均经过测试. 首先HTML代码 复制代码 代码如下: HTML Code <html> <head> <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> </head> <body> <form name=&quo

jquery选择器简述

jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性. jquery选择器大方向可以分为这样: 下面我们先来看看基本选择器总的CSS选择器: 1.标签选择器: $("element") 其中,参数element,表示待查找的HTML标记名,如$("div"),标签选择器获取元素的方式是高效的,因为它继承自javascript中的ge

jquery选择器大全 全面详解jquery选择器

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

JQuery 选择器、DOM节点操作练习实例

一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s