「这是我参与11月更文挑战的第 24 天,活动详情查看:2021最后一次更文挑战」
Text 类型
Text 节点由 Text 类型表示,包含按字面解释的纯文本,也可能包含转义后的 HTML 字符,但不含 HTML 代码。
Text 类型的节点具有以下特征:
- nodeType = 3
- nodeName = "#text"
- nodeValue 为节点上的文本
- parentNode 为 Element 对象
- 不会有子节点
Text 节点中包含的文本可以使用 nodeValue
属性访问,或者是使用 data
属性访问,可以理解为,这两个属性,都指向了同一个位置
通过 id 获取到 span
,通过 span.childNodes
查询他的当前子节点集合
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 将当前文本节点拆分为两个文本节点
通过查询 span.childNodes
,发现现在确实变为了 2 个 text
类型的子节点
substringData(offset, count)
提取从位置 offset 到 offset + count 的文本。
这个方法只是返回 Text 类型节点的截取文本,并不会修改 DOM 上的文本数据
如果是一个空白的标签,即标签的中间没有任何文本,那么这个标签即没有文本节点
一般情况下,我们都会对标签添加一些文本显示,这个时候,标签就会有 1 个文本节点(如上面的大部分操作),我们也可以使用 .nodeValue
这种直接修改属性的方式,可以立即变更 HTML 上显示的文本内容