DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作
- 文档：表示整个HTML网页文档
- 对象：表示将网页中每一个部分都转换为一个对象
- 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。例如HTML DOM树模型
节点：Node，构成HTML文档最基本的单元
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
事件：文档或浏览器窗口中发生的一些特定的交互瞬间。JS与HTML之间的交互就是通过事件完成
- 使用对象的某个属性绑定一个处理函数来响应事件。
DOM查询
- 可以通过document.querySelector()以及document.querySelectorAll()来接收一个CSS选择器来查询
HTML DOM对象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值 |
使用DOM修改CSS
- 通过JS修改元素的样式：元素.style.样式名 = 样式值（样式值为字符串类型）；如果样式名中存在-号，这种名称需要修改为驼峰命名法，即去掉-，然后将-后的字母大写。
- 获取元素当前的样式：getComputedStyle()方法，该方法返回一个封装当前元素样式的对象
- 常用属性和方法
| 属性 / 方法 | 描述 |
|---|---|
| element.clientHeight | 返回元素的可见高度。 |
| element.clientWidth | 返回元素的可见宽度。 |
| element.scrollHeight | 返回元素的整体高度。 |
| element.scrollLeft | 返回元素左边缘与视图之间的距离。 |
| element.scrollTop | 返回元素上边缘与视图之间的距离。 |
| element.scrollWidth | 返回元素的整体宽度。 |
