如何解析復(fù)雜的選擇器？

div > div.Aaron input[name=ttt]

組合后的意思大概就是：

1. 選擇所有div節(jié)點(diǎn)

2. 選擇div的子元素之后的所有 <div>并且class="Aaron" 的所有元素

3. 之后選擇 div.Aaron元素內(nèi)部的所有input并且屬性[name=ttt]的元素

就針對(duì)這個(gè)簡(jiǎn)單的結(jié)構(gòu)，描述出整個(gè)解析的流程

我們用組合語句，在高級(jí)瀏覽器上jquery都是通過querySelectorAll處理的，所以我們討論的都是在低版本上的實(shí)現(xiàn)，偽類選擇器，XML要放到最后，本文暫不涉及這方便的處理。

需要用到的幾個(gè)知識(shí)點(diǎn):

1: CSS選擇器的位置關(guān)系
2: CSS的瀏覽器實(shí)現(xiàn)的基本接口
3: CSS選擇器從右到左掃描匹配

CSS選擇器的位置關(guān)系

其實(shí)不難發(fā)現(xiàn)，一個(gè)節(jié)點(diǎn)跟另一個(gè)節(jié)點(diǎn)有以下幾種關(guān)系：

祖宗和后代  
父親和兒子
臨近兄弟
普通兄弟

在CSS選擇器里邊分別是用：空格、>、+、~。

（其實(shí)還有一種關(guān)系：div.Aaron，中間沒有空格表示了選取一個(gè)class為Aaron的div節(jié)點(diǎn)）

<div id="grandfather">
  <div id="father">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>
  </div>
</div>

爺爺grandfather與孫子child1屬于祖宗與后代關(guān)系（空格表達(dá)）

父親father與兒子child1屬于父子關(guān)系，也算是祖先與后代關(guān)系（>表達(dá)）

哥哥child1與弟弟child2屬于臨近兄弟關(guān)系（+表達(dá)）

哥哥child1與弟弟child2，弟弟child3都屬于普通兄弟關(guān)系（~表達(dá)）

在Sizzle里有一個(gè)對(duì)象是記錄跟選擇器相關(guān)的屬性以及操作：Expr。它有以下屬性：

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

Expr.find = {
      'ID'    : context.getElementById,
      'CLASS' : context.getElementsByClassName,
      'TAG'   : context.getElementsByTagName
}

所以最終總的原理：

1、支持高級(jí)API 直接調(diào)用querySelectorAll

2、降級(jí)通過sizzle處理，那么內(nèi)部會(huì)有一個(gè)規(guī)則把選擇器分組groups，然后通過從右邊往左邊查找，加入編譯函數(shù)的方式節(jié)約重復(fù)查找的性能問題