章节
问答
笔记
评论
占位
占位

querySelector的兼容处理

上一小节提到了querySelectorAll提供一个上下文范围,但是浏览器无视了这个上下文,默认还是类似document的处理。

那么针对这种情况如何兼容?

Andrew Dupont提出了一个解决方案,原理很简单:

context.querySelector
在上下文调用的context元素上指定一个id,通过这个限制范围,这个方法用的非常广泛。

我们看来自jQuery2.1.1的代码:

先看看jQuery最终的实现context.querySelectorAll用的上下文调用:

$('#test2').click(function() {
 //代码右图
}

代码可见newContext可能是document || 提供的一个上下文。

如: var context = document.querySelector('.aaron'); 此时的上下文即是<div class= "aaron">节点。

context.querySelectorAll('.aaron span') 在文档内找全部符合选择器描述的节点不包括Element本身。

最关键的地方其实就是通过给<div class= "aaron">加一个id用来限制范围,所以处理就变成了:

<div class= "aaron" id="[id='sizzle-1405486760710']">
context.querySelectorAll('[id='sizzle-1405486760710'] .aaron span')

注意finally总是执行context.removeAttribute("id"),意味着我们在之前的处理强制加了一个id,反推hack的手法,selectors前面指定上下文的的id,限制匹配的范围。

所以整个处理方式,我们可以总结几点:

1. 关键是给context设置一个id,所以上下文content,就会存在这个id限制范围。

2. 拼接出查询的选择器,附上这个ID前缀

newSelector: "[id='sizzle-1405486760710'] div[class='text']"

3. 查询

newContext.querySelectorAll( newSelector )

4. 因为强制加了ID,所以需要删除

context.removeAttribute("id");

这样就达到目的范围限制context.querySelectorAll了。

querySelectorAll在选择器上存在的问题,具体我是看jQuery的源码相关处理,基本都是IE8上的问题。jQuery对兼容的判断,都是采用的功能判断直接特性检测,伪造一个真实的环境测试支持度,针对querySelectorAll选取存在的问题之后分析。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?