getElementByXXX和querySelector的区别？

最新推荐文章于 2024-04-19 20:18:55 发布

田江

最新推荐文章于 2024-04-19 20:18:55 发布

阅读量1.5k

点赞数 5

分类专栏： JavaScript从入门到精通 DOM 文章标签： getElement querySelector

本文链接：https://blog.csdn.net/jiang7701037/article/details/80662763

版权

JavaScript从入门到精通同时被 2 个专栏收录

147 篇文章 79 订阅

订阅专栏

DOM

9 篇文章 0 订阅

订阅专栏

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>

田江

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
getElementByXXX和querySelector的区别？

querySelector 属于 W3C 中的 Selectors API 规范。而 getElementsBy 系列则属于 W3C 的 DOM 规范"都是JavaScript中获取HTML元素的方法，都能够完成DOM对象的获取，以下是区别：1、getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之...
复制链接

扫一扫