# HTML DOM Document 对象
## HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 **节点**:

- 文档是一个文档节点。
- 所有的 HTML 元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。
- 注释是注释节点。

---


## Document 对象

当浏览器载入 HTML 文档, 它就会成为 **Document 对象**。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

> [!warn] 
> Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。


# HTML DOM 元素对象
## 元素对象

在 HTML DOM 中, **元素对象**代表着一个 HTML 元素。

元素对象 的 **子节点** 可以是元素节点，文本节点，注释节点。

**NodeList 对象** 代表了节点列表，类似于 HTML 元素的子节点集合。

元素可以有属性。属性属于属性节点。

# HTML DOM 属性对象
## Attr 对象

在 HTML DOM 中, **Attr 对象** 代表一个 HTML 属性。

HTML属性总是属于HTML元素。

---

## NamedNodeMap 对象

在 HTML DOM 中, the **NamedNodeMap 对象** 表示一个无顺序的节点列表。

我们可通过节点名称来访问 NamedNodeMap 中的节点。

> [!alert] 
> 在 W3C DOM 内核中, Attr (属性) 对象继承节点对象的所有属性和方法 。
> 
> 在 DOM 4 中, Attr (属性) 对象不再从节点对象中继承。
> 
> **从长远的代码质量来考虑，在属性对象中你需要避免使用节点对象属性和方法:**


# HTML DOM 事件

HTML DOM 事件允许 Javascript 在 HTML 文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

**提示：** 在 W 3 C 2 级 DOM 事件中规范了事件模型。

---



**DOM：** 指明使用的 DOM 属性级别。

# HTML DOM Console 对象
# Console 对象

Console 对象提供了访问浏览器调试模式的信息到控制台。

# CSS 样式声明对象(CSSStyleDeclaration)

## CSSStyleDeclaration 对象

CSSStyleDeclaration 对象表示一个 CSS 属性-值（property-value）对的集合。

# DOM HTMLCollection

HTMLCollection 是 HTML 元素的集合。

HTMLCollection 对象类似一个包含 HTML 元素的数组列表。

[getElementsByTagName()](https://www.runoob.com/jsref/met-element-getelementsbytagname.html) 方法返回的就是一个 HTMLCollection 对象。