1、根据ID获取 getElementById()
<div id="time">2021-10-31</div>
<script>
// 1、因为文档页面从上往下加载,所以得现有标签 所以script写到标签下面
// 2、get 获得 element 元素 by 通过 驼峰命名法
// 3、参数id是大小写敏感的字符串
// 4、返回的是一个元素对象 element对象
var timer = document.getElementById('time');
console.log(timer);
console.dir(timer);
// console.dir() 打印返回的元素对象 更好查看属性和方法
</script>
2、根据元素标签选择 getElementsByTagName()
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2.可以使用for循环遍历数组中的元素
for(var i= 0;i<lis.length;i++){
console.log(lis[i]);
}
//3.如果转义一个元素 返回的同样是伪数组的形式
//4.如果页面中没有这个元素 返回一个空的伪数组a
3、H5新增选择方式
// 1.getElementsByClassName() 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2.querySelector() 返回指定选择器的第一个元素对象 选择元素需要加符号 .box #nav
var firstBox = document.querySelector('.box');
// 3.querySelectorAll() 返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
4、获取特殊元素 body和html元素
// 1.获取body元素
var bodyEle=document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
console.dir(htmlEle);