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. HTML5添加背景音乐

    html5 audio 给博客 网页加背景音乐 可以加上个按钮或者链接 让其可停止或暂停 下面代码只是暂停 可以弄成暂停 播放两种状态切换.. 可以考虑换成a标签 <a href="# ...

  2. sql生成20位数随机数

    declare @rnd nvarchar(50)set @rnd =''while LEN(@rnd)<20 begin set @rnd =@rnd + REPLACE ( CONVERT( ...

  3. Unity之GUI控件

    在这里就贴一个连接吧:GUI

  4. 表达式求值(河南省第四届ACM试题-C题)题解

    以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定指定的一个由3种函数组成的表达式,计算其数值. [题目分析] 一开始以为是后缀表达式,后来抽了没想出来,最后用了递归的方法解 ...

  5. 用python实现文件读取和内容替换

    infile = open("D:/test.txt", "r") #打开文件 outfile = open("D:/pp2.txt", & ...

  6. Linux man 后面的数字含义及作用

    Linux的man很强大,该手册分成很多section,使用man时可以指定不同的section来浏览,各个section意义如下: 1 Executable programs or shell co ...

  7. oc block基本使用

    // // main.m // block基本使用 // // Created by Ymmmsick on 15/7/21. // Copyright (c) 2015年 Ymmmsick. All ...

  8. chrome提供的功能

    chrome://chrome-urls/ List of Chrome URLs chrome://accessibility chrome://appcache-internals chrome: ...

  9. Delphi之TDrawGrid绘制

    一直都对QQ的好友列表很好奇,最先感觉用TreeView实现的,看了看TreeView的源码,发现要实现还真的不太好完成任务啊,其中最大的原因是自己的功力不足,后来觉得用ListView来做吧,结果也 ...

  10. mysql zk切换整个过程

    <pre name="code" class="html">mysql master: test:/root/zk# cat zk.pl use Z ...