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";
}
假如获取到的temp的长度都为3,
Demo1能将三个元素的className全部更改为new_class”,
Demo2只能讲第一个元素和第三个元素的className更改为”new_class”.