和我一起深入了解文档对象模型(DOM)「Text 类型概述」

572 阅读2分钟

「这是我参与11月更文挑战的第 24 天,活动详情查看:2021最后一次更文挑战

Text 类型

Text 节点由 Text 类型表示,包含按字面解释的纯文本,也可能包含转义后的 HTML 字符,但不含 HTML 代码。

Text 类型的节点具有以下特征:

  • nodeType = 3
  • nodeName = "#text"
  • nodeValue 为节点上的文本
  • parentNode 为 Element 对象
  • 不会有子节点

Text 节点中包含的文本可以使用 nodeValue 属性访问,或者是使用 data 属性访问,可以理解为,这两个属性,都指向了同一个位置

image.png

通过 id 获取到 span,通过 span.childNodes 查询他的当前子节点集合

Text 节点为文本操作提供了这么些方法

appendData(text)

向节点末尾添加文本 text

image.png

deleteData(offset, count)

从位置 offset 开始删除 count 个字符

image.png

insertData(offset, text)

在位置 offset 插入 text

image.png

replaceData(offset, count, text)

用 text 替换从位置 offset 到 offset + count 的 文本

image.png

splitText(offset)

在位置 offset 将当前文本节点拆分为两个文本节点

image.png

通过查询 span.childNodes,发现现在确实变为了 2 个 text 类型的子节点

substringData(offset, count)

提取从位置 offset 到 offset + count 的文本。

image.png

这个方法只是返回 Text 类型节点的截取文本,并不会修改 DOM 上的文本数据


如果是一个空白的标签,即标签的中间没有任何文本,那么这个标签即没有文本节点

image.png

一般情况下,我们都会对标签添加一些文本显示,这个时候,标签就会有 1 个文本节点(如上面的大部分操作),我们也可以使用 .nodeValue 这种直接修改属性的方式,可以立即变更 HTML 上显示的文本内容