querySelectorAll 和 getElementsBy系列区别

querySelectorAll VS getElementsBy系列

发现一个有意思的东西

两者都可以用来查找元素，不过getElementsByClassName() 是为了HTML5所添加的API

索性查询了一下

发现知乎上讲解的也比较详细

区别1 : 接受参数不一样

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

可以看到querySelectorAll()接受的参数可以是 .xx .x这样的形式

区别2 : 返回的nodeList不一样

知乎上说大部分人都知道，看来我的js太渣了。
不过还好，现在我知道了哈哈哈哈

querySelector 返回的是一个static nodeList
而 getElementsBy 系列的返回的是一个 Live Node List。

// Demo 1
var ul = document.querySelectorAll('ul')[0],lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}
// Demo 2

var ul = document.getElementsByTagName('ul')[0],lis = ul.getElementsByTagName("li");

for(var i = 0; i < lis.length ; i++){

ul.appendChild(document.createElement("li"));

}

demo2因为返回是Live Node List 所以会无限循环，而demo1因为是静态的就不会返回

总结：querySelector和querySelectorAll查询的结果不是动态的，其余的都是动态改变，而且querySelector和querySelectorAll中的css选择符支持正则

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!