1.介绍

DOM 全意即为 Document Object Model，文档对象模型。

它将整个网页视作一份文档，文档当中包含许多节点，如文本节点、属性节点以及元素节点。

另外它提供了一系列用来操作更改这些节点的方法与属性。

2.方法

2-1.选择器

• document.getElementById() 根据 id 获取唯一元素。
• document.getElementsByClassName() 根据类名获取所有元素。
• document.getElementsByTagName() 根据标签名获取所有元素。
• document.querySelector() 根据 id、className 或者 tagName 获取唯一元素。
• document.querySelectorAll() 根据 id、className 或者 tagName 获取所有元素。

2-2.节点操作

• document.createElement() 创建元素节点。

• document.createTextNode() 创建文本节点。

• document.createAttribute() 创建属性节点。

• appendChild() 添加子节点。

• removeChild() 删除子节点。

• replaceChild() 替换子节点。

• insertBefore() 在节点前插入节点。

2-3.属性操作

• getAttribute() 获取属性值。
• setAttribute() 修改属性值。
• hasAttribute() 是否含有某一属性值。
• removeAttribute 移除属性。

3.属性

说到 DOM属性，用的最广泛的应该是 style 属性。但是值得注意的，利用该属性只能得到行内属性，而不是元素的计算属性。

TIP

如果不仅仅要获取元素的行内属性的话，可以使用 window.getComputedStyle(element, pseudoElt) 这个方法。

也可以使用 offset 系列的部分相关属性，后一章我们会详细说明。

简单介绍下：

window.getComputedStyle(element, pseudoElt) 可以用来获取目标元素的计算样式。

也可以利用第二个参数 pseudoElt 来获取目标元素的伪元素（before、afetr）的计算样式。

const root = document.querySelector('#root')
const target = window.getComputedStyle(root)
// 获取具体样式时，有两种方法。假设要获取 ‘背景颜色’.
// ① 直接利用获取对象属性的方式
console.log(target.backgroundColor)
// ② 利用 element.getPropertyValue(property)
console.log(target.getPropertyValue('background-color'))

// 第二种方式相对第一种方式，更友好的一点在于，不用在考虑JS中的驼峰命名，直接利用css的写法即可。

此外，常用的属性还有：

• childNodes 子节点，可能会包含文本节点、元素节点。
• children 子节点，只有元素节点。
• previousSibling 前一个兄弟节点。
• nextSibling 下一个兄弟节点。
• parentNode 父节点(可能是元素节点、文本节点或者文档片段节点)。
• parentElement 父元素节点。
• firstChild 第一个子节点。
• lastChild 最后一个子节点。