DOM（文件对象模型）

1. 基本概念

DOM （ Document Object Model ，文档对象模型），是用来呈现以及与任意 HTML 或 XML 文档交互的API （ Application Program Interface ，应用程序接口）。 DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。
DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。
DOM 并不是天生就被规范好了的，它是浏览器开始实现 JavaScript 时才出现的。这个传统DOM 有时会被称为 DOM 0 。现在， WHATWG 维护 DOM 现存标准。

1.1 DOM 树

DOM 树又叫文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
文档：一个 HTML 页面就是一个文档，使用 document 表示

1.2 DOM 节点

DOM节点 网页中所有内容都是节点（标签、属性、文本、注释等）

整个文档是一个文档节点
每个Html元素是一个元素节点
Html元素内的文本是文本节点
每个Html属性是属性节点
注释是注释节点

树中的所有节点均可以通过JS访问、修改

2. 获取元素

2.1 通过 id 获取

（1）语法格式： var 元素对象 = document . getElementById ( " id 属性名称 " )
（2）作用：通过页面中某个元素的 id 属性来获取这个元素对象
（3）返回值：这个方法执行后会有一个返回值，如果获取到则返回当前对象，否则返回 null
示例：

	<div id="time">2022-6-21</div>
	<script>
		var time = document.getElementByld('time');// id以字符串形式书写
		console.log(time);// <div id="time">
		console.log(typeof time);// object
		console.dir(time);// 可以打印返回的元素对象，更好地查看里面的属性和方法
	</script>

2.2 根据标签名获取

（1）语法格式： var 返回对象集 = document . getElementsByTagName ( ’ 标签名称 ’ )
（2）作用：根据指定的标称名称返回这些对象
示例：

    <ul>
        <li>2022</li>
        <li>2021</li>
        <li>2020</li>
        <li>2019</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);// lis指所有的<li>
        console.log(lis[0]);// 返回第一个<li> 即2022
        for(var i=0;i<lis.length;i++){
     
        	console.log(lis[i]);// 遍历所有的 <li>
        }
    </script>

除了可以使用 document 来引用这个方法外，还可以使用它父组对象来引用这个方法
指定父元素，获取其子元素 获取某个父元素内部指定标签名的子元素
注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己
示例：

    <ul id="time">
        <li>2022</li>
        <li>2021</li>
        <li>2020</li>
        <li>2019</li>
    </ul>
    <script>
        var ul = document.getElementById('time');// 获取父级元素
        console.log(ul);
        lis = ul.getElementsByTagName('li'); // 通过父级元素来获取子元素 
        console.log(lis);
    </script>

2.3 根据name属性获取

（1）语法格式： var 元素对象集 = document . getElementsByName ( ’ name 属性名 ' )
（2）作用：根据 name 属性来获取元素对象的集合
示例：

 
    <p> <input type="checkbox" name="time" value="2022">2022
        <input type="checkbox" name="time" value="2021">2021
    </p>
    <script>
        var year = document.getElementsByName('time');
        console.log(year);
    </script>

2.4 根据类名获取

（1）语法格式： var 元素对象集 = document . getElementsByClassName ( ’ 类名称 ’ )
（2）作用：根据元素的样式名称来获取元素集（也就是元素的 class 属性来获取）
示例：

    <div class="box">盒子1</div>
    <div class="box