资讯专栏INFORMATION COLUMN

JavaScript中DOM的层次节点(二)

hzx / 3323人阅读

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

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(),很少会直接引用特性节点。

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

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

相关文章

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

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

    JinB 评论0 收藏0
  • webkit渲染机制浅析

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

    Cobub 评论0 收藏0
  • JavaScriptDOM层次节点(一)

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

    leap_frog 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

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

    vvpvvp 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

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

    adam1q84 评论0 收藏0

发表评论

0条评论

hzx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<