DOM 文档对象

一、DOM（Document Object Model）： 文档对象模型

1、DOM 的核心对象就是 docuemnt 对象

- document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法

2、`getElementById` 是通过标签的 id 名称来获取标签的

- 因为在一个页面中 id 是唯一的，所以获取到的就是一个元素

3、 `getElementsByClassName` 是用过标签的 class 名称来获取标签的

- 因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素 伪数组

- 哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

4、`getElementsByTagName` 是用过标签的 标签 名称来获取标签的

- 因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素

- 哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

5、 `querySelector` 是按照选择器的方式来获取元素

- 也就是说，按照我们写 css 的时候的选择器来获取

- 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素

6、`querySelectorAll` 是按照选择器的方式来获取元素

- 这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

7、innerHTML 

获取元素内部的 HTML 结构

innerText

- 获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）

8、getAttribute

- 获取元素的某个属性（包括自定义属性） 元素.getAttribute()

9、setAttribute

- 获取元素的某个属性（包括自定义属性） 元素.setAttribute()

10、removeAttribute

- 直接移除元素的某个属性   元素.setAttribute('class', 'box')

11、style

- 专门用来给元素添加 css 样式的  元素.style.属性=

- 添加的都是行内样式

12、className  元素.className = 

- 专门用来操作元素的 类名的

13、操作类名对象

①.添加类名   boxEle.classList.add("active");

②、删除类名    boxEle.classList.remove("active"); 

③、查看是否包含类名    boxEle.classList.contains("active");

### 获取节点

 `childNodes`：获取某一个节点下 **所有的子一级节点**  伪数组

`children` ：获取某一节点下所有的子一级 **元素节点**  伪数组

 `firstChild`：获取某一节点下子一级的 **第一个节点**   

 `lastChild`：获取某一节点下子一级的 **最后一个节点**

`firstElementChild`：获取某一节点下子一级 **第一个元素节点**

`lastElementChild`：获取某一节点下子一级 **最后一个元素节点**

`nextSibling`：获取某一个节点的 **下一个兄弟节点**

`previousSibling`：获取某一个节点的 **上一个兄弟节点**

`nextElementSibling`：获取某一个节点的 **下一个元素节点**

`previousElementSibling`：获取某一个节点的 **上一个元素节点**

`parentNode`：获取某一个节点的 **父节点**

 `attributes`：获取某一个 **元素节点** 的所有 **属性节点**   伪数组

#### nodeType

- `nodeType`：获取节点的节点类型，用数字表示

  ```javascript

  console.log(eleNode.nodeType) // 1

  console.log(attrNode.nodeType) // 2

  console.log(textNode.nodeType) // 3

  ```

  - `nodeType === 1` 就表示该节点是一个 **元素节点**

  - `nodeType === 2` 就表示该节点是一个 **属性节点**

  - `nodeType === 3` 就表示该节点是一个 **注释节点**

#### nodeName

- `nodeName`：获取节点的节点名称

###  nodeValue

- `nodeValue`： 获取节点的值

#### 汇总

| -        | nodeType | nodeName   | nodeValue |

| -------- | -------- | ---------- | --------- |

| 元素节点 | 1        | 大写标签名 | null      |

| 属性节点 | 2        | 属性名     | 属性值    |

| 文本节点 | 3        | \#text     | 文本内容  |

## 操作 DOM 节点

- 我们所说的操作无非就是 **增删改查（CRUD）**

①、创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）

 `createElement`：用于创建一个元素节点

 `createTextNode`：用于创建一个文本节点

②、向页面中增加一个节点

- `appendChild`：是向一个元素节点的末尾追加一个节点

- 语法： `父节点.appendChild(要插入的子节点)`

 `insertBefore`：向某一个节点前插入一个节点

- 语法： `父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)`

③、删除页面中的某一个节点

- `removeChild`：移除某一节点下的某一个节点

- 语法：`父节点.removeChild(要移除的字节点)`

④、修改页面中的某一个节点

 `replaceChild`：将页面中的某一个节点替换掉

- 语法： `父节点.replaceChild(新节点，旧节点)`

⑤、 获取页面中的某一个节点

## 获取元素的非行间样式

getComputedStyle（非IE使用）

- 语法：`window.getComputedStyle(元素, null).要获取的属性`

currentStyle（IE使用）

- 语法： `元素.currentStyle.要获取的属性`

## 获取元素的偏移量

- 就是元素在页面上的什么位置

- 我们有几个属性来获取，**offsetLeft** 和 **offsetTop** 和 **offsetWidth** 和 **offsetHeight**

### offsetLeft 和 offsetTop

- 获取的是元左边的偏移量和上边的偏移量

- 分成两个情况来看

-①没有定位的情况下

  - 获取元素边框外侧到页面内侧的距离

-②有定位的情况下

  - 获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的 left 和 top 值）

### offsetWidth 和 offsetHeight

- 获取元素 `内容宽高 + padding宽高 + border宽高` 的和