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

Sizzle过滤器原理(下)

除了判断的过程,那么还涉及到节点的关系处理,如:

var selector = "div > div.Aaron [name=ttt]";

节点与节点之间是有层级关系的,这里就遇到了“>”与“空”。子元素组合器(E > F)和(E F)都作为后代组合,但是他们有所不同,更具体的是(E > F)它只会选择第一级的后代,那么我们从右边往左边匹配就会遇到这样的情况,[name=ttt]节点与div.Aaron中间的连接符“空”则为后代选择器,那么意味着[name=ttt]元素的可能是div.Aaron元素的一个孩子,孙子,曾孙等。

同理div.Aaron与div的连接符是“>” 子元素选择器,这个简单只能是父子关系。除此之外,还有相邻兄弟选择器“+”与“~”,(prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素。

针对选择器的层级关系:
首先“>”与“空”是祖辈关系,这样可以理解是线型的,那么我们只要递归检测每次元素的 parentNode 属性返回指定节点的父节点。

同理“+”与“~”也是类似的兄弟关系,无非就是扩展的范围不同,所以针对层级的关系问题。

jQuery引入了词素关系:

relative: {
  ">": {
    dir: "parentNode",
    first: true
  },
  " ": {
    dir: "parentNode"
  },
  "+": {
    dir: "previousSibling",
    first: true
  },
  "~": {
    dir: "previousSibling"
  }
}

这里的dir可以认为是查找的一个条件,就是查找父节点还是兄弟节点,那么first的意思就是一个快速条件,因为“>”选择器是一个很明确的父子关系所以通过标记first只需要查找一层即可。我们可以看代码:

function addCombinator(elems) {
        var elem;
        while ((elem = elems['parentNode'])) {
               if (elem.nodeType === 1) {
                       return elem
               }
        }
};

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?