getElementByXXX和querySelector的区别？

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>

getElementByXXX和querySelector的区别？

猜你喜欢