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

最新推荐文章于 2024-04-15 11:18:20 发布

咸鸭蛋炒饭

最新推荐文章于 2024-04-15 11:18:20 发布

阅读量496

点赞数

分类专栏： HTML5基础篇文章标签： dom html javascript

本文链接：https://blog.csdn.net/u010853130/article/details/55044077

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

<!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>