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);