querySelectorAll的BUG
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的更多相关文章
- 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼
前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...
- Sizzle源码分析 (一)
Sizzle 源码分析 (一) 2.1 稳定 版本 Sizzle 选择器引擎博大精深,下面开始阅读它的源代码,并从中做出标记 .先从入口开始,之后慢慢切入 . 入口函数 Sizzle () 源码 19 ...
- sizzle分析记录:关于querySelectorAll兼容问题
querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...
- querySelector和querySelectorAll
jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById.document.getElementByName… ,查找元素很方便,其实W3C中 ...
- CSS选择器比较:queryselector queryselectorall
官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...
- js jquery 权限单选 bug修改以及正确代码 购物车数量加减
效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...
- ES6 Arrow Function & this bug
ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...
- IE6、IE7兼容querySelectorAll和querySelector方法
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...
- event duplication bind bug & h5 dataset flag solution
event duplication bind bug & h5 dataset flag solution https://codepen.io/xgqfrms/full/PaRBEy/ OK ...
随机推荐
- HTML5添加背景音乐
html5 audio 给博客 网页加背景音乐 可以加上个按钮或者链接 让其可停止或暂停 下面代码只是暂停 可以弄成暂停 播放两种状态切换.. 可以考虑换成a标签 <a href="# ...
- sql生成20位数随机数
declare @rnd nvarchar(50)set @rnd =''while LEN(@rnd)<20 begin set @rnd =@rnd + REPLACE ( CONVERT( ...
- Unity之GUI控件
在这里就贴一个连接吧:GUI
- 表达式求值(河南省第四届ACM试题-C题)题解
以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定指定的一个由3种函数组成的表达式,计算其数值. [题目分析] 一开始以为是后缀表达式,后来抽了没想出来,最后用了递归的方法解 ...
- 用python实现文件读取和内容替换
infile = open("D:/test.txt", "r") #打开文件 outfile = open("D:/pp2.txt", & ...
- Linux man 后面的数字含义及作用
Linux的man很强大,该手册分成很多section,使用man时可以指定不同的section来浏览,各个section意义如下: 1 Executable programs or shell co ...
- oc block基本使用
// // main.m // block基本使用 // // Created by Ymmmsick on 15/7/21. // Copyright (c) 2015年 Ymmmsick. All ...
- chrome提供的功能
chrome://chrome-urls/ List of Chrome URLs chrome://accessibility chrome://appcache-internals chrome: ...
- Delphi之TDrawGrid绘制
一直都对QQ的好友列表很好奇,最先感觉用TreeView实现的,看了看TreeView的源码,发现要实现还真的不太好完成任务啊,其中最大的原因是自己的功力不足,后来觉得用ListView来做吧,结果也 ...
- mysql zk切换整个过程
<pre name="code" class="html">mysql master: test:/root/zk# cat zk.pl use Z ...