JS：DOM查询3-优快云博客

本文深入解析了DOM操作的各种方法，包括如何使用document.documentElement获取html根标签，document.all获取页面所有元素，以及getElementsByClassName(), document.querySelector()和document.querySelectorAll()等方法的使用技巧和适用范围。

document.documentElement保存的是html根标签
document.all代表页面中的所有元素
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是不支持IE8及以下的浏览器
document.querySelector()
需要一个选择器的字符串作为参数，可以根据一共css选择器来查询一个元素节点对象
虽然IE8没有getElementsByClassName()但是可以使用querySelector()代替
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回一个
document.querySelectorAll()
该方法和document.querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//获取body标签
			// window.onload = document.getElementsByTagName("body")[0];
			//在docment中有一个属性body,保存body的引用
			var body = document.body;
			//document.documentElement保存的是html根标签
			var html = document.documentElement;
			//document.all代表页面中的所有元素
			var all = document.all;
			
			/*
			根据元素的class属性值查询一组元素节点对象
			getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是不支持IE8及以下的浏览器
			*/
		   var box1 =document.getElementsByClassName("box1");
		   console.log(box1.length);
		   
		   //获取页面中所有的div
		   var divs = document.getElementsByTagName("div");
		   
		   //获取class为box1中的所有的div
		   /*
		   document.querySelector()
		   需要一个选择器的字符串作为参数，可以根据一共css选择器来查询一个元素节点对象
		   虽然IE8没有getElementsByClassName()但是可以使用querySelector()代替
		   使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回一个
		   */
		   var div = document.querySelector(".box1 div")
		   
		   var box1 = document.querySelector(".box1");
		   
		   /*
		   document.querySelectorAll()
		   该方法和document.querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
		   */
		   
		   var box1 = document.querySelectorAll(".box1");
		   
		   console.log(box1.length);
		   
		</script>
	</head>
	<body>
		<div class="box1">
			<div></div>
		</div>
		<div></div>
	</body>
</html>