之前写了一大段都删了,想了想没必要介绍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);