javascript获取页面元素的方式

（1）根据ID获取

使用 document.getElementById() 方法

<div id = "time">2021-12-13</div>
<script>
	var t = document.getElementById('time');
</script>

（2）根据标签名获取

使用document.getElementsByTagName()方法可以返回带有指定标签名的对象集合 注意这里是Elements，复数

<ul>
	<li> </li>
	<li> </li>
	<li> </li>
	<li> </li>
	...
</ul>
<script>
	var lis = document.getElementsByTagName('li');
	console.log(lis);
	console.log(lis[0]);
	//反回的是获取过来元素对象的集合，以伪数组的形式存储
	//我们想要一次打印里面的元素就需要循环
	for (var i = 0; i < lis.length; i++) {
		console.log(lis[i]);
	}
	
	//如果页面中只有一个li，返回的还是伪数组形式
	//如果没有这个元素则返回的是空的伪数组的形式
</script>

但是页面中可能不是只有ul里面有li，ol等里面也有li

这时我们还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

var ol = document.getElementById('ol');
var lis = ol.getElementsByTagName('li');

（3）通过h5新增方法获取

document.getElementsByClassName(‘类名’);根据类名获取某些元素集合

document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象，切记里面的选择器需要加符号 .box #nav

document.querySelectorAll(‘选择器’); 返回指定选择器的所有元素对象

<div class = "box">div1</div>
<div class = "box">div2</div>
<div id = "nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>
	//通过类名
	var boxs = document.getElementsByClassName('box');
	//querySelector
	var firstBox = document.querySelector('.box');
	//id
	var nav = document.querySelector('#nav');
	//标签名
	var li = document.querySelector('li');//返回’首页‘盒子
	//querySelectorAll
	var lis = document.querySelectorAll('li');
</script>

（4）特殊元素获取

1、获取body元素

var bodyEle = document.body;//返回body元素对象

2、获取html元素

var htmlEle = document.documentElement;//返回html元素对象