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