javascript基礎（Dom查詢的其他方法：body，documentElement，all，getElementsByClassName()，querySelectorAll()）（二十八）

厚積薄發2017發表於2017-02-13
JavaScript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//獲取body標籤
				//var body = document.getElementsByTagName("body")[0];
				
				
				//document.body可以用來獲取頁面中的body元素
				var body = document.body;
				
				//document.documentElement可以獲取頁面的根元素
				var root = document.documentElement;
				
				//console.log(root);
				
				/*
				 * 獲取頁面中的所有元素
				 */
				//var all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				/*
				 * document.all
				 * 	- 可以獲取頁面的所有的元素
				 */
				var all = document.all;
				//console.log(all[2]);
				
				/*
				 * document.getElementsByClassName()
				 * 	- 可以根據class屬性值獲取一組元素節點物件，
				 * 		但是該方法不支援IE8及以下的瀏覽器
				 */
				//根據class屬性值，查詢一組元素節點物件
				//var box = document.getElementsByClassName("box1");
				//console.log(box.length);
				
				/*
				 * querySelector()
				 * 	- 該方法可以根據CSS選擇器去頁面中查詢物件
				 *  - 需要一個選擇器的字串作為引數
				 * 	- querySelector()只會返回一個符合條件的元素
				 * 		如果符合條件的元素有多個，它只會返回第一個
				 */
				var box2 = document.querySelector("#box2");
				
				var box1 = document.querySelector(".box1");
				
				//console.log(box1.innerHTML);
				
				
				/*
				 * querySelectorAll()
				 * 	- 和querySelector()功能類似，都可以根據CSS選擇器去查詢
				 *  - 不同的是querySelectorAll()它會將所有符合條件的元素封裝到一個陣列中返回，
				 * 		即使查詢到的只有一個，也會返回陣列
				 */
				var box1 = document.querySelectorAll(".box1");
				
				console.log(box1.length);
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box1">aaa</div>
		<div class="box1">aaa</div>
		<div class="box1">aaa</div>
		
		<div id="box2">box2</div>
	</body>
</html>


 

相關文章