DOM，文档对象模型，是一个编程接口，处理可扩展语言（HTML），通过DOM可以改变网页的内容、结构、样式。
DOM树，一个页面就是一个文档，页面中的标签叫元素，网页中所有内容都可以看作一个节点，使用node表示，上面所有内容可以看作一个对象，所以叫文档对象模型。
同时，对于对象的学习，也要明白，对象是什么？是否有参数？返回值是什么？代码验证？
白龙网指出，文档页面由上往下加载，所以要先有标签，再有JS，即JS放到文档的最后面。或者给window添加事件load，让页面所有内容加载完毕，或者DOM加载完毕之后，再执行JS。
1、根据id获取元素 getElementById('time')
<body>
<!-- 1.通过id获取文档元素 -->
<div id="time">2022-7-15</div>
<script>
var timer = document.getElementById('time');//2.id必须小写的字符串
console.log(timer);
console.log(typeof timer);//3.返回的是一个元素对象
console.dir(timer);//4.打印返回对象，查看更详细的属性、方法
</script>
</body>
2、使用标签获取元素 getElementsByTagName('li')
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);//1.返回的是获取过来的元素的对象集合，以伪数组的形式存储
for (i = 0; i < lis.length; i++) {//2.通过遍历打印所有元素
console.log(lis[i]);
}
//3.如果页面中只有一个元素，返回的仍然是伪数据形式
//4.如果页面中没有这个元素，返回的是空的伪数据形式
var ol = document.getElementById('ol');//5.打印一个父元素内的所有LI标签
console.log(ol.getElementsByTagName('li'));//通过父元素id获取父元素对象，然后再获取子标签所有元素
console.log(ol.getElementsByTagName('li'));//父元素第一个数据的子标签元素，这两种方法只获取子元素，不获取父元素标签
</script>
</body>
3、通过类名获取元素 getElementsByClassName('box')
通过类名获取元素，是H5新增的方式，但是IE9以上浏览器才能使用。
<script>
//根据类名获取某些元素，返回元素对象的集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
</script>
4、巧用选择器获取元素 querySelector() querySelectorAll()
H5新增的方法，对浏览器的兼容性有要求，例如要IE9以上
<script>
//1.querySelector('选择器')，返回指定选择器第一个元素对象，选择器要用对：类选择器、id选择器、标签选择器、后代选择器、并集选择器；此处可以使用选择器选择任意指定的元素
var firstbox = document.querySelector('.box');
console.log(firstbox);
var firstbox2 = document.querySelector('#nav');
console.log(firstbox2);
var firstbox3 = document.querySelector('li');
console.log(firstbox3);
var lastbox = document.querySelector('li:last-child');
console.log(lastbox);
var anybox = document.querySelector('li:nth-child(2)');
console.log(anybox);
//2.querySelectorAll('.box')，选择指定选择器所有元素的集合
var allbox = document.querySelectorAll('.box');
console.log(allbox);
var allbox = document.querySelectorAll('#nav');
console.log(allbox);
var allbox = document.querySelectorAll('li');
console.log(allbox);
</script>
5、获取特殊元素 document.body document.documentElement
//1.获取body元素
var bodys = document.body;
console.log(bodys);
//2.获取html元素
var htmls = document.documentElement;
console.log(htmls);
//3.或者使用常规的id、类名、标签、方法等都可以选择到这两个特殊元素
var body2 = document.querySelector('body');
console.log(body2);
var html2 = document.querySelector('html');
console.log(html2);
var body3 = document.getElementsByTagName('body');
console.log(body3);
</script>
JS由三部分组成：
ECMSscript：主要是学习JS的基础语法，如变量、数据类型、运算符、流程迫近、数组、函数、对象等内容。
WebAPIs:主要包含BOM、DOM两大块，实现JS的应用，如网页交互效果。
WebAPIs是浏览器的API，通过BOM/DOM实现网页的一些交互效果。更多浏览器API可以查阅MDN文档。
API是应用程序接口，会用即可。
WebAPIs主要是针对浏览器而言，有输入，输出，如函数。
对于相关方法的学习，要搞明白3点，做什么？是否需要参数？代码如何实现的？