(一)DOM 简介
DOM，全称 Document Object Model, 文档对象模型。
JS 通过 DOM 来对 HTML 文档进行操作，了解了 DOM 就能随便操作 WEB 页面。
(二)DOM 节点类型
| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
(三) 罕用 DOM 办法
(1) 获取元素节点
1、
document.getElementById(id)：依据 ID 获取元素，如果页面中呈现多个一样的 ID，则返回第一次呈现的；
2、document.getElementsByTagName(tagName)：依据元素标签获取，获取到的是一个数组；
3、document.getElementsByClassName(className)：依据元素类名获取，获取到的是一个数组；
4、document.getElementsByName(name)：依据 name 获取元素；
5、namedItem()：通过元素的 name 属性来获取元素；
6、document.anchors()：获取所有带 name 属性的 a 标签；
7、document.forms：获取所有的元素；
8、document.links：获取所有带 href 属性的 a 标签；
9、document.querySelector()：依据 css 选择器获取 dom，有多个，只取第一个；
10、document.querySelectorAll()：返回满足条件的所有元素；
(2) 获取元素节点的子节点
1、
getElementsByTagName(): 返回以后节点的指定标签名后辈节点；
2、childNodes: 示意以后节点的所有子节点，包含文本节点在内的所有节点；
3、firstChild: 示意以后节点的第一个子节点；
4、lastChild: 示意以后节点的最初一个子节点；
(3) 获取父节点和兄弟节点
1、parentNode: 示意以后节点的父节点；
2、previousSibling: 示意以后节点的前一个兄弟节点；
3、nextSibling: 示意以后节点的后一个兄弟节点；