如何解析復(fù)雜的選擇器？
div > div.Aaron input[name=ttt]
組合后的意思大概就是：
1. 選擇所有div節(jié)點
2. 選擇div的子元素之后的所有 <div>并且class="Aaron" 的所有元素
3. 之后選擇 div.Aaron元素內(nèi)部的所有input并且屬性[name=ttt]的元素
就針對這個簡單的結(jié)構(gòu)，描述出整個解析的流程
我們用組合語句，在高級瀏覽器上jquery都是通過querySelectorAll處理的，所以我們討論的都是在低版本上的實現(xiàn)，偽類選擇器，XML要放到最后，本文暫不涉及這方便的處理。
需要用到的幾個知識點:
1: CSS選擇器的位置關(guān)系 2: CSS的瀏覽器實現(xiàn)的基本接口 3: CSS選擇器從右到左掃描匹配
CSS選擇器的位置關(guān)系
其實不難發(fā)現(xiàn)，一個節(jié)點跟另一個節(jié)點有以下幾種關(guān)系：
祖宗和后代 父親和兒子 臨近兄弟 普通兄弟
在CSS選擇器里邊分別是用：空格、>、+、~。
（其實還有一種關(guān)系：div.Aaron，中間沒有空格表示了選取一個class為Aaron的div節(jié)點）
<div id="grandfather"> <div id="father"> <div id="child1"></div> <div id="child2"></div> <div id="child3"></div> </div> </div>
爺爺grandfather與孫子child1屬于祖宗與后代關(guān)系（空格表達）
父親father與兒子child1屬于父子關(guān)系，也算是祖先與后代關(guān)系（>表達）
哥哥child1與弟弟child2屬于臨近兄弟關(guān)系（+表達）
哥哥child1與弟弟child2，弟弟child3都屬于普通兄弟關(guān)系（~表達）
在Sizzle里有一個對象是記錄跟選擇器相關(guān)的屬性以及操作：Expr。它有以下屬性：
relative = {
">": { dir: "parentNode", first: true },
" ": { dir: "parentNode" },
"+": { dir: "previousSibling", first: true },
"~": { dir: "previousSibling" }
}
所以在Expr.relative里邊定義了一個first屬性，用來標(biāo)識兩個節(jié)點的“緊密”程度，例如父子關(guān)系和臨近兄弟關(guān)系就是緊密的。在創(chuàng)建位置匹配器時，會根據(jù)first屬性來匹配合適的節(jié)點
CSS的瀏覽器實現(xiàn)的基本接口
除去querySelector,querySelectorAll
HTML文檔一共有這么四個API：
1、getElementById，上下文只能是HTML文檔。
2、getElementsByName，上下文只能是HTML文檔。
3、getElementsByTagName，上下文可以是HTML文檔，XML文檔及元素節(jié)點。
4、getElementsByClassName，上下文可以是HTML文檔及元素節(jié)點。IE8還沒有支持。
所以要兼容的話sizzle最終只會有三種完全靠譜的可用
Expr.find = {
'ID' : context.getElementById,
'CLASS' : context.getElementsByClassName,
'TAG' : context.getElementsByTagName
}
所以最終總的原理：
1、支持高級API 直接調(diào)用querySelectorAll
2、降級通過sizzle處理，那么內(nèi)部會有一個規(guī)則把選擇器分組groups，然后通過從右邊往左邊查找，加入編譯函數(shù)的方式節(jié)約重復(fù)查找的性能問題
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報