浅谈 DOM 中的类型

Node 类型

node 类型是 DOMLevel 1 中定义的，除了 ie 浏览器所有的浏览器都可以访问这个类型，在 js 中，所有的节点类型都继承 node 类型。

简单说一下 DOMLevel 根据 W3C DOM 规范，DOM 是 HTML 与 XML 的应用编程接口（API），DOM 将整个页面映射为一个由层次节点组成的文件。有 1 级、2 级、3 级共 3 个级别。

每个节点都有 nodeType 属性，表示该节点的内容。节点类型由 12 个数值常量表示。

 Node.ELEMENT_NODE（ 1）    Node.ATTRIBUTE_NODE（ 2）    Node.TEXT_NODE（ 3）    Node.CDATA_SECTION_NODE（ 4）    Node.ENTITY_REFERENCE_NODE（ 5）    Node.ENTITY_NODE（ 6）    Node.PROCESSING_INSTRUCTION_NODE（ 7）    Node.COMMENT_NODE（ 8）    Node.DOCUMENT_NODE（ 9）    Node.DOCUMENT_TYPE_NODE（ 10）    Node.DOCUMENT_FRAGMENT_NODE（ 11）    Node.NOTATION_NODE（ 12）

Document 类型

Document 类型是 js 中表示文档节点的类型，最常用的一般是通过 HTMLDocument 实例取到我们的文档对象。详情看这里吧https://xie.infoq.cn/article/e37224429d950dd9db6b9f82e

Element 类型

Element 类型表示 xml 或者 html 元素对外访问的元素标签名、属性和子节点。详情也看这里吧。

Text 类型

顾名思义，text 包含纯文本还有我们转义后的 html 字符串，但是它不包含我们的 html 代码。我们可以通过 nodeValue 来访问它的文本，也可以通过 data 属性来访问。

Comment 类型

Comment 表示的是我们写的注释，它与上面的 text 类型相识，也可以通过 nodeValue 和 data 属性来访问。如果我们要通过 Js 来访问或者创建的话，要确保他们在 html 标签的里面。

CDATASection 类型

CDATASection 类型表示 xml 中特有的 CDATA 区块，(XML) 是一种结构化数据交换语言。一般我们写代码不会遇到这个的。

DocumentType 类型

DocumentType 类型包含了文档的文档类型信息（doctype）。它在 DOM Level1 不支持动态创建，值能在解析代码是创建。一般我们也用不到这个。

DocumentFragment 类型

DocumentFragment 类型是文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

Attr 类型

元素的属性在 DOM 中以 Attr 类型来表示。它也不被认为是 DOM 树的一部分。它有三个属性 name，value，specified。Attr 表示元素的特性，在所有浏览器中，都可以访问 Attr 类型的构造函数和原型。

name：特性的名称

value：特性的值

specified：是一个布尔值，用以区别特性是在代码中指定还是默认的

attr 特性存在于元素的 attributes 属性中的节点。

一般我们还是使用 getAttribute()、 removeAttribute()和 setAttribute()方法操作属性，而不是直接操作属性节点。