浅谈DOM中的类型

2022-11-14 16:48:43 浏览数 (1)


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个数值常量表示。

代码语言:javascript复制
    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()方法操作属性,而不是直接操作属性节点。

0 人点赞