浅谈DOM中的类型

​

theme: channing-cyan

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

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实例取到我们的文档对象。详情看这里吧DOM核心——Document类型 (juejin.cn)

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()方法操作属性，而不是直接操作属性节点。