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

浅浅的花香味﹌ 2021-08-13 20:34 480阅读 0赞

#### 文本节点 ####

文本节点由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>hello world!</div>