JS--JavaScript文本节点特性，访问、创建、操作文本节点（appendData、deleteData、insertData、replaceData...）

最新推荐文章于 2025-06-01 10:50:04 发布

原创最新推荐文章于 2025-06-01 10:50:04 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JS文本节点 #创建文本节点

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文深入探讨了DOM中Text节点的概念，包括其特征、创建、访问和操作方法。讲解了如何使用innerText属性获取文本，定义通用文本读取方法，以及如何规范化文本节点避免空节点和连续文本节点的问题。

文本节点

文本节点由Text类型表示，包含纯文本内容，或转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征：

nodeType值为3
nodeName值为“#text”
nodeValue值为节点所包含的文本
parentNode是一个Element类型节点
不包含子节点

访问文本节点

使用文本节点的nodeValue属性或data属性可以访问Text节点中包含的文本，这两个属性中包含的值相同。修改nodeValue值也会通过data反映出来，反之亦然。每个文本节点还包含length属性，使用它可以返回包含文本的长度，利用该属性可以遍历文本节点中每个字符。

示例：使用innerText获取div中的文本

<div id="div1">div元素</div>
<script>
	var div = document.getElementById("div1");
	var text = div.innerText;
	alert(text);
</script>

示例：定义一个读取元素包含文本的通用方法

function text(e){
	var s = "";
	var e = e.childNodes || e; //判断元素是否包含子节点
	for(var i = 0; i < e.length; i++){
		s += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
		//递归遍历
	}
	return s;
}

创建文本节点

document.createTextNode(data)
//data表示字符串

示例：创建一个新div，并为它设置class值为red，然后再创建一个文本节点，并将其添加到div元素中，最后将div元素添加到文档body元素中。

var element == document.createElement("div");
element.className = "red";
var textNode = document.createTextNode(Hello world!);
element.appendChild(textNode);
document.body.appendChild(element);

示例：由于解析器的实现或者DOM操作的原因等，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。为了避免这种情况，一般应该在父辈元素上调用**normalize()**方法，如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

var element = document.createElement("div");
var textNode = document.createTextNode("Hello"); //创建文本节点
element.appendChild(textNode);//追加文本节点
var anotherTextNode = document.createTextNode(" world!");//创建文本节点
element.appendChild(antherTextNode);//追加文本节点
document.body.appendChild(element);
alert(element.childNodes.length);//返回2
element.normalize();
alert(element.childNodes.length);//返回1
alert(element.firstChild.nodeValue);//"hello world!"

操作文本节点

使用下列方法可以操作文本节点中的文本

appendData(string)：
将字符串string追加到文本节点的尾部
deleteData(strat, length)：
从start下标位置开始删除length个字符
insertData(start, string)：
在start下标位置插入字符串string
replaceData(start, length, string)：
使用字符串string替换从start下标位置开始length个字符
splitText(offset)：
在offset下标位置把一个Text节点分割成两个节点
substringData(start, length)：
从start下标位置开始提取length个字符

$注意：\color{red}{注意：}$ 在默认情况下，每个可以包含内容的元素最多只能由一个文本节点，而且必须确实有内容存在。在开始标签于结束标签之间只要存在空隙，就会创建文本节点。

<!-- 下面div不包含文本节点 -->
<div></div>
<!--  下面div包含文本节点，值为空格 -->
<div> </div>
<!-- 下面div包含文本节点，值为换行符 -->
<div>
</div>
<!-- 下面div包含文本节点，值为“hello world!" -->
<div>hello world!</div>