文档对象模型 DOM

DOM 是 JS 操作网页的接口，全称文档对象模型（Document Object Model）。DOM 可以将任何 HTML 描绘成一个由多层节点构成的结构，主要用于将网页转为一个 JS 对象，从而可以使用 JS 对网页进行各种操作（如增删内容）。

[ 本质 ] 简单来讲，DOM 编程就是：使用 W3C 定义的 API 来操作 HTML 文档，使用户可以与进行页面交互。

[ API 的概念 ] API（Application Programming Interface，应用程序编程接口），是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。

任何开发语言都有自己的 API

API 的特征：输入和输出（如，var max = Math.max(1,2,3);）

API 的使用方法（如，console.log();）

[ Web API 的概念 ] 浏览器提供的一套操作浏览器功能和页面元素的 API（即，BOM 和 DOM）。

此处的 Web API，特指浏览器提供的 API（一些方法）。另，MDN-Web API？！（了解即可）。

HTML DOM

DOM 是 W3C 推荐的处理可扩展标记语言的标准编程接口，它是一种与平台和语言无关的 API ，可以动态的访问程序和脚本，更新其内容、结构和 www 文档的风格（目前，HTML 和 XML 文档是通过说明部分定义的）。

HTML DOM 允许 JS 改变 HTML 元素的内容（文档可进一步被处理），处理结果可加入到当前的页面。

DOM 是一种基于树的 API 文档（又称为文档树模型），它要求在处理过程中整个文档都表示在存储器中。

[1] DOM 树：浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。

也就是说，节点之间的关系构成了层次，而 DOM 将整个页面规划成由节点层次构成的文档。

// 文档：一个网页，可以称为文档
// 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
    <p><b>Hello</b> world!</p>
    </body>
</html>

// 文档：一个网页，可以称为文档

// 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

</head>

<body>

<p><b>Hello</b> world!</p>

</body>

</html>

下图为这个页面的DOM树：

[2] DOM 节点：DOM的最小组成单位叫做节点（node），文档的树形结构（DOM树）由不同的节点组成。

[ 节点类型？↓ ] 节点分为12种不同类型，每种类型分别表示文档中不同的信息及标记。

ELEMENT_NODE 元素节点

TEXT_NODE 文本节点

~~COMMENT_NODE~~

~~DOCUMENT_TYPE_NODE~~

......

[ 节点关系（只读）？↓ ] 每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。

节点中的各种关系可以用传统的家族关系（父子、兄弟）来描述，相当于把文档树比喻成家谱。 // 父子结构 node.parentNode 父节点 node.parentElement 父元素 node.childNodes 所有子节点 node.children 所有子元素 node.firstChild 第一个子节点 node.lastChild 最后一个子节点 node.firstElementChild 第一个子元素 node.lastElementChild 最后一个子元素 // 兄弟关系 node.previousSibling 前一个兄弟节点 node.nextSibling 后一个兄弟节点 node.previousElementSibling 前一个兄弟元素 node.nextElementSibling 后一个兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

节点中的各种关系可以用传统的家族关系（父子、兄弟）来描述，相当于把文档树比喻成家谱。

// 父子结构
    node.parentNode       父节点
    node.parentElement    父元素
    node.childNodes    所有子节点
    node.children      所有子元素
    node.firstChild    第一个子节点
    node.lastChild     最后一个子节点
    node.firstElementChild    第一个子元素
    node.lastElementChild     最后一个子元素

// 兄弟关系
    node.previousSibling    前一个兄弟节点
    node.nextSibling        后一个兄弟节点
    node.previousElementSibling    前一个兄弟元素
    node.nextElementSibling        后一个兄弟元素

[ ~~节点遍历？↓~~ ] [ ~~节点范围？↓~~ ]

[3] DOM 基础：节点操作（获取页面元素、动态创建元素等）、属性操作、样式操作、事件（什么时候做什么操作）