DOM 简介

DOM(Document Object Model) 文档对象模型将页面元素与 JavaScript 连接起来，让 JavaScript 可以访问和更 HTML 文档的所有元素。

通过对象模型，JavaScript 获得了创建动态 HTML 所需的全部功能：

JavaScript 可以改变页面中的所有 HTML 元素
JavaScript 可以更改页面中的所有 HTML 属性
JavaScript 可以更改页面中的所有 CSS 样式
JavaScript 可以删除现有的 HTML 元素和属性
JavaScript 可以添加新的 HTML 元素和属性
JavaScript 可以对页面中所有现有的 HTML 事件做出反应
JavaScript 可以在页面中创建新的 HTML 事件

什么是 DOM？

DOM 是 W3C（万维网联盟）标准。

DOM 定义了访问文档的标准：

W3C 文档对象模型 (DOM) 是一个平台和语言中立的界面，它允许程序和脚本动态访问和更新文档的内容、结构和样式。

W3C DOM 标准分为 3 个不同的部分：

核心 DOM - 适用于所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是针对 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换句话说：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

DOM 编程接口

可以使用 JavaScript（以及其他编程语言）访问 HTML DOM。

在 DOM 中，所有 HTML 元素都被定义为对象。

编程接口是每个对象的属性和方法。

一个属性是一个值，你可以获取或设置（如更改 HTML 元素的内容）。

一个方法是你可以做的（如添加或删除 HTML 元素）的动作。

例子

以下示例将通过更改 id 为 demo 的 <p> 元素的 innerHTML 属性来修改元素的内容：

<html>
  <body>
    <p id="demo"></p>

    <script>
      document.getElementById("demo").innerHTML = "Hello World!";
    </script>
  </body>
</html>

在上面的例子中， getElementById 是一个方法， innerHTML 而是一个属性。

访问 HTML 元素的最常见方法是使用元素的 id 。在上面的示例中， getElementById 查找的是 id="demo" 的元素。

获取或设置元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性可用于获取或更改任何 HTML 元素，包括 <html> 和 <body> 。

DOM Document 对象

HTML DOM 的 Document 文档对象代表了整个 HTML 文档，HTML 文档中的所有元素都包含在文档对象中。Document 对象提供了很多方法用来操作元素，绑定事件等。
DOM 查找元素

DOM 提供了很多实用的方法操作元素，本文展示了在 HTML 页面中查找和访问 HTML 元素的方法。
DOM 修改元素

DOM 提供了很多实用的方法操作元素，本文展示了在 HTML 页面使用 JavaScript 更改元素内容、属性的方法。
DOM 表单验证

表单是和用户交互的一个重要元素，本文整理了表单验证相关的一些方法。
DOM 更改 CSS

使用 JavaScript 更改 HTML 元素的样式也是常见的操作，HTML DOM 提供了更改 HTML 元素的样式的方法。
DOM 动画

动画有助于提高页面的交互性和可访问性，本章节学习使用 JavaScript 创建 HTML 动画。
DOM 事件

HTML DOM 提供了给元素绑定事件处理程序的方法，这样就能在事件发生的时候做一些自定义的操作。
DOM 事件监听器

addEventListener() 提供了另一种为元素绑定/添加事件的方式，并允许设置事件的传播方式。
DOM 节点导航

使用 HTML DOM，您可以使用节点关系导航节点树。
DOM 节点操作

利用 DOM API 可以方便的添加和删除 HTML 元素节点。
DOM HTMLCollection

HTMLCollection 接口定义了一个包含 HTML 元素的集合，并提供了一些属性和方法从集合中选择元素。HTMLCollection 中元素的顺序和文档流中顺序保持一致。
DOM NodeList

NodeList 对象是一个 DOM 节点对象的集合。NodeList 的作用几乎与 `HTMLCollection` 对象相同。