querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"
都是JavaScript中获取HTML元素的方法,都能够完成DOM对象的获取,以下是区别:
1、getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。
简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后就和文档的改变无关了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box01" class="boxcls">
<span></span>
<span></span>
</div>
<div class="boxcls">
</div>
<div id="box02" class="boxcls">
</div>
<input id="btn01" type="button" value="测试" />
</body>
</html>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn01").onclick = function(){
let divs01 = document.getElementsByTagName("div");//divs01里有三个元素
let divs02 = document.querySelectorAll("div");//divs02里有三个元素
document.body.append(document.createElement("div"));//增加一个div
console.log(divs01);//divs01里是4个元素
console.log(divs02);//divs02里依然是3个元素
}
}
</script>
2、执行效率上
//getElement效率高
//querySelector效率低
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box01" class="boxcls">
<span></span>
<span></span>
</div>
<div class="boxcls">
</div>
<div id="box02" class="boxcls">
</div>
<input id="btn01" type="button" value="测试" />
</body>
</html>
<script type="text/javascript">
//getElement效率高
//querySelector效率低
window.onload = function(){
document.getElementById("btn01").onclick = function(){
console.time('getElement');
for(let i=0;i<10000;i++){
let divs01 = document.getElementsByTagName("div");//divs01里有三个元素
}
console.timeEnd('getElement');//9ms
console.time('querySelectorAll');
for(let i=0;i<10000;i++){
let divs02 = document.querySelectorAll("div");//divs02里有三个元素
}
console.timeEnd('querySelectorAll');//25ms
}
}
</script>