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);
相关推荐
e度空间 2020-05-16
jiedinghui 2020-10-25
葉無聞 2020-09-01
buttonChan 2020-08-02
drdrsky 2020-07-05
葉無聞 2020-07-05
opspider 2020-06-28
zhanghaibing00 2020-06-28
opspider 2020-06-26
somboy 2020-06-26
sdbxpjzq 2020-06-25
xiaohuli 2020-06-17
zhanghaibing00 2020-06-14
牵手白首 2020-06-14
teresalxm 2020-06-13