dom文档对象手册_JavaScript核心之DOM

本博客主要介绍内容如下：

1、DOM是什么；

2、DOM中的Node接口的属性；

3、DOM中的Node接口的方法；

4、DOM中的Document接口的属性；

5、DOM中的Document接口的方法

---

1、DOM是什么

• 文档对象模型DOM英文全称 Document Object Model，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来；
• DOM遵循W3C DOM 和WHATWG DOM标准；
• 所有操作和创建web页面的属性，方法和事件都会被组织成对象的形式；
• DOM 并不是一个编程语言；
• 不同的浏览器都有对DOM不同的实现， 这些实现对当前的DOM标准而言，都会呈现出不同程度的一致性，每个web浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问；
• 许多对象都实现了多个接口（API）供使用；
• 重要的数据类型：

1. document
2. element
3. nodeList
4. attribute
5. namedNodeMap

详细可以查看MDN链接

DOM概述​developer.mozilla.org

文档对象模型 (DOM)​developer.mozilla.org

通过一张图来加深了解

DOM中的D就是Document，代表文档结构，以一颗树的形式展示，这里都是标签名字以及文字内容。

DOM中的O就是Object，代表文档转换为对象的结构，以一颗树的形式展示，这里都是构造函数，前面有学到过构造函数.prototype就是一个对象。这里最后形成的对象都与Document中的标签和文字一一对应。

另外文本节点构成的对象后面其实还有String构造函数构造的对象

所以页面中的节点通过构造函数，构造出对应的对象，这就是DOM的主要功能。

我们继续在浏览中测试一下该对象是否相等。

在浏览器中文档是window.document，也可以直接写成document，这里的第一个d是小写。

而Document作为构造函数，第一个D是大写的。

文档中的每一个标签都可以用一个对象来代替

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数

通过上面的图和文字介绍，于是我可以知道JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：

API (web 或 XML 页面) = DOM + JS (脚本语言)

以上的接口都是构造函数，我们通过typeof 来测试

从上面的构造函数的情况来看们主要后缀就是分为Document、Element、Text

• Document——根据文档的类型（例如HTML，XML，SVG，...）分为HTMLDocument接口（使用"text/html"内容类型）和XMLDocument接口（XML和SVG文档）；
• Element——是非常通用的基类，所有 Document对象下的对象都继承它，根据类型还可以分为HTMLElement接口（所有HTML元素的基础接口）、SVGElement接口（是所有SVG元素的基本接口）、XULElement接口（在web以外的语言,像 XUL）；
• Text——代表Element或Attr的文本内容的文本内容 ；

那么既然HTML文档中有所有的标签都可以转换成对应的对象，作为对象肯定会有原型（公用属性）。

1、document的原型链

Document​developer.mozilla.org

document分为HTML文档、XML和SVG文档，HTML文档实现了HTMLDocument接口，而XML和SVG文档实现了XMLDocument接口;

主要测试HTMLDocument接口

2、Element的原型链

Element​developer.mozilla.org

Element根据类型还可以分为HTMLElement接口（所有HTML元素的基础接口）、SVGElement接口（是所有SVG元素的基本接口）、XULElement接口（在web以外的语言,像 XUL）

主要测试HTMLDocument接口

3、Text的原型链

Text​developer.mozilla.org

Text包括了Element或Attr的文本内容的文本内容

这里主要测试Element的接口

他们最终都是引用Object构造函数所构造的对象，这跟前面说的JavaScript的几种基本类型的原型链一致。

bomber：《Global Object、公用属性（原型）、prototype和__proto__》​zhuanlan.zhihu.com

所以我们可以看到document、Element、Text原型链总结图，他们在引用Object.prototype之前都引用了Node.prototype。

我们终于引出了Node

Node​developer.mozilla.org

Node是一种被多种DOM类型继承的接口接口，它允许各种类型的DOM能以同样的方式来操作。除了上面三种Document、Element、Text继承了Node，还有很多。

Node继承自EventTarget，而继承Node的属性和方法的接口则有：Document，Element，Attr，CharacterData（Text，Comment，和CDATASection继承原型自CharacterData），ProcessingInstruction，DocumentFragment，DocumentType，Notation，Entity，EntityReference 。

Node就可以代表其他的类型

Node.nodeType​developer.mozilla.org

我们在浏览器上测试几个：

文本节点

元素(标签)节点

文档节点

所以DOM 是一棵树（tree），树上有 Node，Node 分为 Document（html）、Element（元素）和 Text（文本），以及其他不常用的。

---

2、DOM中的Node接口的属性

我们在讨论Node有哪些接口（API）的时候，其实是在讨论DOM树中的所有对象有哪些接口（API）

Node​developer.mozilla.org

常用的：

1. childNodes
2. firstChild
3. innerText
4. lastChild
5. nextSibling
6. nodeName
7. nodeType
8. nodeValue
9. outerText
10. ownerDocument
11. parentElement
12. parentNode
13. previousSibling
14. textContent

（1）childNodes

Node.childNodes​developer.mozilla.org

Node.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

需要注意的是返回的子节点包括回车，回车也是一个文本节点。

（2）children

ParentNode.children​developer.mozilla.org

ParentNode.children 是一个只读属性，返回 一个Node的子elements，是一个动态更新的 HTMLCollection。它是一个伪数组。

它返回的全是元素（标签）节点，没有文本节点

(3)parentNode返回父节点(可能是元素或者非元素节点)

ParentNode​developer.mozilla.org

ParentNode 是一个原始接口，不能够创建这种类型的对象；它在Element、Document和DocumentFragment对象上被实现。

如果上个父元素是一个元素节点，会返回元素节点。

如果上个父元素是一个非元素节点，比如文档节点，会返回文档节点。

(4)parentElement返回父元素节点

Node.parentElement​developer.mozilla.org

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM元素，则返回null。

如果上个父元素是一个元素节点，会返回元素节点。

如果上个父元素是一个非元素节点，比如文档节点，会返回null

(5)parent​Element返回父元素（标签）节点

Node.parentElement​developer.mozilla.org

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM元素，则返回null。

(6)第一个子节点(可能是文本或者元素节点)

Node.firstChild​developer.mozilla.org

开发者工具上面会显示那种API来自Element或者Node

(7)第一个是元素（标签）节点的子节点

ParentNode.firstElementChild​developer.mozilla.org

开发者工具上面会显示那种API来自Element或者Node