javascript文本节点操作方法你知道吗？

#麻辣小龙虾#

已于 2023-04-18 10:12:46 修改

阅读量2.7k

点赞数 1

分类专栏： web前端 javascript 文章标签： javascript

于 2017-06-25 12:46:38 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/73715652

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

89 篇文章 1 订阅

订阅专栏

Text类型

文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的
HTML 字符，但不能包含HTML 代码。Text 节点具有以下特征：
 nodeType 的值为3；
 nodeName 的值为"#text"；
 nodeValue 的值为节点所包含的文本；
 parentNode 是一个Element；

 不支持（没有）子节点。
可以通过nodeValue 属性或data 属性访问Text 节点中包含的文本，这两个属性中包含的值相
同。对nodeValue 的修改也会通过data 反映出来，反之亦然。使用下列方法可以操作节点中的文本。

 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 属性，保存着节点中字符的数目。而且，
nodeValue.length 和data.length 中也保存着同样的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>工作记事本</title>
</head>

<body>
    <div id="wordText">这个是文本节点</div>
</body>

<script>
	var b = document.getElementById("wordText");
	var text = b.childNodes.item(0);	//获取第几个子节点文本值
	console.log(text.nodeValue);
	text.appendData("加到后面的文本");	//文本节点追加新值
	console.log(text.nodeValue);
	text.deleteData(0,2);	//删除指点位置文本
	text.insertData(1,"insert");	//插入指点位置文本
	text.replaceData(1,3,"插入的值");	//插入指点位置文本
	text.splitText(2);	//指点位置拆分文本节点,原文本节点不变，返回拆分后的后面那部分的节点。
	text.substringData(1,3);	//方法跟字符串处理函数 stringObject.substr(start,length);方法类似
</script>

</html>

#麻辣小龙虾#

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript文本节点操作方法你知道吗？

Text类型文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符，但不能包含HTML 代码。Text 节点具有以下特征：  nodeType 的值为3；  nodeName 的值为”#text”；  nodeValue 的值为节点所包含的文本；  parentNode 是一个Element； 不支持（没有）子节点。可以通过
复制链接

扫一扫