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

文本节点

文本节点由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个字符

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

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