querySelector和querySelectorAll是W3C提供的新的查询接口

目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。

但是Element.querySelectorAll有个bug

  

<div>
    <div id="bar">
<span>
<a href="###">asfd</a>
</span>
</div>
</div>

  

var bar = document.getElementById('bar');
console.log(bar.querySelectorAll('div span a').length); // 1
console.log(bar.querySelectorAll('span a').length); // 1
console.log($('div span a',bar)); // jQuery没有选择到

div span a 这里本该选择不到的,结果却选择到了

下面是ExtJS的兼容实现:

try {
/*
* This checking here is to "fix" the behaviour of querySelectorAll
* for non root document queries. The way qsa works is intentional,
* however it's definitely not the expected way it should work.
* When descendant selectors are used, only the lowest selector must be inside the root!
* More info: http://ejohn.org/blog/thoughts-on-queryselectorall/
* So we create a descendant selector by prepending the root's ID, and query the parent node.
* UNLESS the root has no parent in which qsa will work perfectly.
*
* We only modify the path for single selectors (ie, no multiples),
* without a full parser it makes it difficult to do this correctly.
*/
            // startIdRe = /^\s*#/;
if (root.parentNode && (root.nodeType !== 9) && path.indexOf(',') === -1 && !startIdRe.test(path)) {
path = '#' + Ext.escapeId(Ext.id(root)) + ' ' + path;
root = root.parentNode;
}
return single ? [ root.querySelector(path) ]
: Ext.Array.toArray(root.querySelectorAll(path));
}
catch (e) {
}

  

如果root有父节点,并且root不是document,并且只是单个选择,并且选择文本中不以#开头,那么就将root赋值上ID,进行查询

比如:bar.querySelectorAll('div span a')----> '#bar div span a',进行纠正,但是不支持多个的选择(比如div span a,p div span)

再将root换成root的父节点,这样就解决了问题

Ext.id 方法是获得Element的ID,如果没有ID属性,则赋值一个

Ex.escapeId 是将不合法的ID值进行一个过滤

以后再研究jQuery关于这个BUG的处理。

querySelectorAll的BUG的更多相关文章

  1. 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

    前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...

  2. Sizzle源码分析 (一)

    Sizzle 源码分析 (一) 2.1 稳定 版本 Sizzle 选择器引擎博大精深,下面开始阅读它的源代码,并从中做出标记 .先从入口开始,之后慢慢切入 . 入口函数 Sizzle () 源码 19 ...

  3. sizzle分析记录:关于querySelectorAll兼容问题

    querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...

  4. querySelector和querySelectorAll

    jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById.document.getElementByName… ,查找元素很方便,其实W3C中 ...

  5. CSS选择器比较:queryselector queryselectorall

    官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...

  6. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  7. ES6 Arrow Function & this bug

    ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...

  8. IE6、IE7兼容querySelectorAll和querySelector方法

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

  9. event duplication bind bug & h5 dataset flag solution

    event duplication bind bug & h5 dataset flag solution https://codepen.io/xgqfrms/full/PaRBEy/ OK ...

随机推荐

  1. PropertyGrid--基本功能

    一.引言 PropertyGrid是Visual Studio中新增的控件,顾名思义,其主要是用来显示和设置某一(或多个)对象的属性值的.其具体的实现主要是基于.Net中强大的反射机制.Propert ...

  2. Devexpress之barManager控件属性

    隐藏菜单栏左边的竖线和右边的箭头? 1.隐藏菜单栏上右边的箭头属性设置:OptionsBar=>>AllowQuickCustomization=False 2.隐藏菜单栏左边的竖线属性设 ...

  3. 常见Web Service 使用网址

    下面的网址是常用Web Service http://www.webxml.com.cn/zh_cn/web_services.aspx 里面的很多Web Service接口...可以用到的,很有用!

  4. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  5. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  6. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  7. ASP.NET版本的Kindeditor插件的使用

    1.先从官网中现在最新版本的Kindeditor,官网地址:http://www.kindsoft.net/ 下载之后的目录结构如下:

  8. bootstrap之noConflict的详解

    翻开推特框架,不经发现,几乎所有的插件都会出现noConflict的写法来防止和其他的插件冲突!我们以button.js为例子,打开其源代码发现 如下: var old = $.fn.button $ ...

  9. MVC 创建带图片的<A></A>标签

    <a href="@Url.Action("Detail", "Product", new { messageId = item.message ...

  10. TensorFlow 深度学习笔记 Logistic Classification

    Logistic Classification Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程地 ...