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

相关推荐