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()方法返回的都是數組數組

相關標籤/搜索

getelementsbyclassname