JavaScript中DOM的层次节点（二）

hzx 发布于2019-08-19 17:20 / 3406人阅读

摘要：将添加到节点的末尾。从指定的位置将当前文本节点分成两个文本节点。类型值区域中的内容没有子节点类型此类型在浏览器中并不常用，只有和支持。类型特性就是元素属性的节点。

1 Text类型

Text类型为文本节点，包含的是可照字面解释的纯文本内容，可以包含转义后的HTML字符，但不能包含HTML代码。

类型	值
nodeType	3
nodeName	"#text"
nodeValue	节点所包含的文本
parentNode	Element
没有节点

可以通过nodeValue和data属性访问Text节点中包含的文本。

appendData(text):将text添加到节点的末尾。

deleteData(offset,count):从offset置顶的位置开始删除count个字符。

insertData(offset,text):在offset位置插入text。

replaceData(offset,count,text):用text替换从offset指定的文职到offset+count为止的文本。

splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。

substringData(offset,count):提取从offset指定的位置开始到offset+count处的字符串。

length：长度。

创建文本节点

    document.createTextNode("Hello world");
    document.createElement("div");
    document.body.appendChild(element);//在未添加之前，虽然创建，但是不会显示出来

如果创建多个文本节点，且是相邻的同胞节点，那么两个节点的文本会连起来显示，中间不会有空格。

2 Comment类型

类型	值
nodeType	8
nodeName	"#comment"
nodeValue	注释的内容

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法，与Text类似，也可以使用nodeValue和data属性来取得注释的内容。

3 CDATASection类型

CDATASection类型只针对XML文档，表示的是CDATA区域，与Comment类似，继承自Text类型，因此拥有除splitText()之外的所有字符串操作方法。

类型	值
nodeType	4
nodeName	"#cdata-section"
nodeValue	CDATA区域中的内容
没有子节点

4 DocumentType类型

此类型在Web浏览器中并不常用，只有Firefox、Safari和Opera支持。

类型	值
nodeType	10
nodeName	doctype名称
nodeValue	null

DocumentType对象不能动态创建，只能通过解析文档代码的方式来创建。若浏览器支持此类型，会把此对象保存在document.doctype中。

5 Attr类型

特性就是元素attribute属性的节点。在所有浏览器中，都可以访问Attr类型的构造函数和原型。

类型	值
nodeType	11
nodeName	特性的名称
nodeValue	特性的值

特性虽然是节点，但不会被认为是DOM文档树的一部分，最常用的方法为getAttribute(),setAttribute()和remveAttribute()，很少会直接引用特性节点。

GPU云服务器云服务器 js中操作dom节点 javascript的dom对象 javascript的dom编程 dom的节点类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78433.html

javaScript 高级程序设计笔记——DOM

摘要：一类型在中，所有的节点类型都继承自类型。包含文档中所有带特性的元素包含文档中所有的元素包含文档中所有的元素包含文档中所有带特性的元素一致性检测因为分为多个级别，也包含多个部分，因此检测浏览器实现了的哪些部分就十分必要。 DOM是针对HTML和XML文档的一个APIDOM描绘了一个层次化的节点树，允许开发人员轻松自如地添加、删除、替换、修改页面的某一部分一、节点层次 DOM将HTML文...

JinB 2019-08-20 19:03 评论0 收藏0
webkit渲染机制浅析

摘要：模块和将下面的渲染机制，安全机制，插件机制等等隐藏起来，提供一个接口层。进行网页的渲染进程，可能有多个。最后进程将结果由线程传递给进程最后，进程接收到结果并将结果绘制出来。这是之前在简书上面的处女作，也搬过来了，以后就一直在 segmentfault 上面写文章了，webkit技术内幕-朱永盛是我大四买的书，很旧的一本书了，当时只看了一点点，一直没继续看完它，现在才看完，，，说来惭愧...

Cobub 2019-08-02 11:03 评论0 收藏0
JavaScript中DOM的层次节点（一）

摘要：是针对和文档的一个，描绘了一个层次化的节点树，允许开发人员添加修改删除节点的一部分。类型级定义了接口，该接口由中的所有节点类型实现。添加的这些属性分别对应于每个元素中都存在的下列标准特性。 DOM是针对HTML和XML文档的一个API，描绘了一个层次化的节点树，允许开发人员添加、修改、删除节点的一部分。 DOM将HTML和XML文档描绘成一个有多个节点构成的结构，节点分为12种不同的...

leap_frog 2019-08-19 17:19 评论0 收藏0
《Webkit技术内幕》之页面渲染过程

摘要：文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书，有很大收获，尤其是对页面渲染有了较深的认识。解析语法分析，基于词法解释器生成的新标记，构建成抽象语法树，解析器尝试将其与某条语法规则进行匹配。文章同步到github《Webkit技术内幕》之页面渲染过程最近拜读了传说中的《Webkit技术内幕》一书，有很大收获，尤其是对页面渲染有了较深的认识。由于功力有限，而且书中设...

vvpvvp 2019-08-29 16:17 评论0 收藏0
《Webkit技术内幕》之页面渲染过程

摘要：文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书，有很大收获，尤其是对页面渲染有了较深的认识。解析语法分析，基于词法解释器生成的新标记，构建成抽象语法树，解析器尝试将其与某条语法规则进行匹配。文章同步到github《Webkit技术内幕》之页面渲染过程最近拜读了传说中的《Webkit技术内幕》一书，有很大收获，尤其是对页面渲染有了较深的认识。由于功力有限，而且书中设...

adam1q84 2019-08-23 10:43 评论0 收藏0