querySelector系列和getElement系列区别-CSDN博客

本文链接：https://blog.csdn.net/u012937029/article/details/68946190

querySelector系列

属于 W3C 中的 Selectors API 规范
querySeletor()返回一个对象
querySelectorAll()返回一个集合（NodeList）
参数均为：css selector字符串

获取页面I属性D为test的元素：
    document.querySelector("#test");
    document.querySelectorAll("#test")[0];
获取页面class属性为”red”的元素:
    document.querySelector('.red')
    document.querySelectorAll('.red')

getElement系列

属于 W3C 的 DOM 规范
getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()
参数为单一的id、tagName等

区别

querySelectorAll 返回的是一个 Static Node List
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")); 
}

Demo 1 中的 lis 是一个静态的 Node List，是一个 li 集合的快照，对文档的任何操作都不会对其产生影响。
Demo 2 中的 lis 是一个动态的 Node List，每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。

再来看一个：

//Demo1
var temp = document.querySelectorAll(".class");
for (var i=0, max=temp.length; i<max; i++) { 
    temp[i].className = "new_class";
}
//Demo2
var temp = document.getElementsByClassName("class");
for (var i=0, max=temp.length; i<max; i++) { 
    temp[i].className = "new_class";
}