js getElementsByClassName与querySelector querySelectorAll的区别

时间 2019-11-10

标签 getelementsbyclassname queryselector queryselectorall 区别栏目 JavaScript 繁體版

原文原文链接

关于它们的区别，我写了个简单的小例子，代码以下javascript

代码如图：html

<body>
	<ul>
		<li class="items-li">测试数据1</li>
		<li class="items-li">测试数据2</li>
		<li class="items-li">测试数据3</li>
		<li class="items-li">测试数据4</li>
		<li class="items-li">测试数据5</li>
		<li class="items-li">测试数据6</li>
		<li class="items-li">测试数据7</li>
		<li class="items-li">测试数据8</li>
	</ul>
	<script type="text/javascript">
		console.log("输出getElementsByClassName获得的结果");
		var byClass=document.getElementsByClassName("items-li");
		console.log(byClass);
		console.log("输出querySelectorAll获得的结果");
		var selectorAll=document.querySelectorAll(".items-li");
		console.log(selectorAll);
		console.log("输出querySelector获得的结果");
		var selector=document.querySelector(".items-li");
		console.log(selector);
	</script>
</body>

效果图：java

由此可知document.querySelector()方法反会的是一组数据中的第一条数据，而document.getElementsByClassName()与document.querySelectorAll()方法返回的都是数组数组