1 什么是DOM？
以下是菜鸟网站上的
DOM是W3C的标准，DOM定义访问了HTML和XML文档的标准。
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
1.1 定义文档的结构
DOM规范，将网页中的HTML文档抽象为内存中的文档对象（DOM TREE）。属中的每一个节点对象对应HTML 文档中的一个元素。
1.2 如何访问文档？
通过访问节点对象。
Document接口作为文档入口
Document 接口代表整个文档。JavaScript 中的对象 document 是对Document 接口的实现。
方法一：直接访问文档中的节点对象
| 方法 | 描述 |
|---|---|
| document.getElementsById | 通过id属性获取节点对象 |
| document.getElementByName | 通过id属性获取节点对象 |
| document/element.getElementsByTagName | 通过 tag 属性获取节点对象 |
| document/element.getElementsByClassName | 通过class属性获取节点对象 |
| document/element.querySelector | 通过 css 选择器 获取首个节点对象 |
| document/element.querySelectorAll | 通过 css 选择器 获取所有节点对象 |
通过节点关系访问一个节点周围的节点对象
父节点（parentNode）：获取所属父节点对象。
（ownerDocument）：获取节点所属文档节点（根节点）对象。
兄弟节点（sibling nodes）
nextSibling：获取前一个兄弟节点的对象
nextElementSlibling：获取前一个兄弟元素节点对象
previousSibling：获取后一个兄弟节点对象。
previousElementSibling：获取所有子元素节点对象。
子节点（child nodes）：
childNodes：获取所有子节点对象
children：获取所有子元素节点对象
hasChildNodes： 判断是否包含子节点对象
childElementCount：获取子元素节点对象数量
firstChild：获取第一个字节点对象
firstElementChild：获取第一个子元素节点对象
lastChild：获取最后一个字节点对象
lastElementChild：获取最后一个子元素节点对象