什么是 DOM？

DOM 是 Document Object Model（文档对象模型）的缩写。

当创建一个网页并把它加载到web浏览器中时，如果没有文档，DOM根据编写的网页文档创建一个文档对象。

扩展：JavaScript是由ECMAScript（核心），DOM ，BOM三部分组成的。

BOM即浏览器对象模型，window对象对应着浏览器窗口的本身，这个对象的属性和方法通常被统称为BOM，

BOM向程序员提供window.open()和window.Onload()。

JavaScript语言里面的对象分为三种类型：

1.  用户定义对象（user-defined object）：由程序员自行创建的对象

2.  内建对象（native object）：内建在JavaScript语言对象里面的，比如说Array、Math和Date

3.   宿主对象（host object）：有浏览器提供的对象（window对象）

什么是 HTML DOM？

HTML DOM 是：HTML 的标准对象模型，HTML 的标准编程接口，W3C 标准。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

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

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

HTML DOM 方法

方法是我们可以在节点（HTML 元素）上执行的动作。

HTML DOM 属性

属性是节点（HTML 元素）的值，能够获取或设置。

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）

appendChild(node) - 插入新的子节点（元素）

removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值

parentNode - 节点（元素）的父节点

childNodes - 节点（元素）的子节点

attributes - 节点（元素）的属性节点

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

HTML DOM