除了判斷的過(guò)程，那么還涉及到節(jié)點(diǎn)的關(guān)系處理，如：
var selector = "div > div.Aaron [name=ttt]";
節(jié)點(diǎn)與節(jié)點(diǎn)之間是有層級(jí)關(guān)系的，這里就遇到了“>”與“空”。子元素組合器(E > F)和(E F)都作為后代組合，但是他們有所不同，更具體的是(E > F)它只會(huì)選擇第一級(jí)的后代，那么我們從右邊往左邊匹配就會(huì)遇到這樣的情況，[name=ttt]節(jié)點(diǎn)與div.Aaron中間的連接符“空”則為后代選擇器，那么意味著[name=ttt]元素的可能是div.Aaron元素的一個(gè)孩子，孫子，曾孫等。
同理div.Aaron與div的連接符是“>” 子元素選擇器,這個(gè)簡(jiǎn)單只能是父子關(guān)系。除此之外，還有相鄰兄弟選擇器“+”與“~”，(prev + next) 和 (prev ~ siblings)之間最值得注意的不同點(diǎn)是他們各自的可及之范圍。前者只達(dá)到緊隨的同級(jí)元素，后者擴(kuò)展了該達(dá)到跟隨其的所有同級(jí)元素。
針對(duì)選擇器的層級(jí)關(guān)系：
首先“>”與“空”是祖輩關(guān)系，這樣可以理解是線型的，那么我們只要遞歸檢測(cè)每次元素的 parentNode 屬性返回指定節(jié)點(diǎn)的父節(jié)點(diǎn)。
同理“+”與“~”也是類似的兄弟關(guān)系，無(wú)非就是擴(kuò)展的范圍不同，所以針對(duì)層級(jí)的關(guān)系問(wèn)題。
jQuery引入了詞素關(guān)系：
relative: {
">": {
dir: "parentNode",
first: true
},
" ": {
dir: "parentNode"
},
"+": {
dir: "previousSibling",
first: true
},
"~": {
dir: "previousSibling"
}
}
這里的dir可以認(rèn)為是查找的一個(gè)條件，就是查找父節(jié)點(diǎn)還是兄弟節(jié)點(diǎn)，那么first的意思就是一個(gè)快速條件，因?yàn)?ldquo;>”選擇器是一個(gè)很明確的父子關(guān)系所以通過(guò)標(biāo)記first只需要查找一層即可。我們可以看代碼：
function addCombinator(elems) {
var elem;
while ((elem = elems['parentNode'])) {
if (elem.nodeType === 1) {
return elem
}
}
};
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)