Javascript中css選擇器的陷阱

以前寫了一大段都刪了，想了想不必介紹api的使用。querySelector querySelectorAll這兩個api如今應該沒人不知道

這裏只簡單說下使用時容易遇到的兩個坑

document.querySelectorAll返回的是靜態的nodelist，能夠理解爲某一時間的快照

舉個例子說就是若是一個ul下有兩個li，如今我用querySelectorAll獲取li，若是之後再動態的添加幾個li，querySelectorAll返回的nodelist是不會包括後來動態添加的li的，而getElementByTagName獲取到的nodelist則是動態的，就算後來動態添加的元素同樣能夠獲取到

<ul>
    <Li>a</li>
    <li>b</li>
</ul>

另一點是返回的結果可能與預想中的有誤差 id爲test的元素中沒有div元素，可是返回的並非空數組，能夠自行實驗一下

<div id="test">
    <b>Hello</b> I'am a ninja
</div>
var a = document.getElementById('test').querySelectorAll('div b');
console.log(a);

下面是JQ的做者給出的一個方法，使其正確的匹配，首先必須爲元素賦予元素一個惟一的id，而且稍後將原始的id恢復回去，而後將id 拼接在選擇器前面

(function() {
    var count = 1;
    this.rootedQuerySelectorAll = function(elem, query) {
        var oldId = elem.id;
        try {
            return elem.querySelectorAll('#' + elem.id + " " + query);
        }
        catch(e) {
            throw e;
        }
        finally {
            elem.id = oldId;
        }
    }
}) ()

var b = rootedQuerySelectorAll(
    document.getElementById('test'),
    'div b'
)
console.log(b);