Text类型

Text节点由Text类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML字符，但不含HTML代码。
Text类型的节点具有以下特征：
- nodeType等于3；
- nodeName值为”#text “；
- nodevalue值为节点中包含的文本；
- parentNode值为Element对象；
- 不支持子节点。
Text节点中包含的文本可以通过nodevalue属性访问，也可以通过data属性访问，这两个属性包含相同的值。
修改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。
默认情况下，包含文本内容的每个元素最多只能有一个文本节点。

<!-- 没有内容，因此没有文本节点 --> 
<div></div> 
<!-- 有空格，因此有一个文本节点 -->
<div> </div> 
<!-- 有内容，因此有一个文本节点 --> 
<div>Hello World!</div>

// 下列代码可以用来访问这个文本节点，同时修改它：
let textNode = div.firstChild; // 或 div.childNodes[0] 
div.firstChild.nodeValue = "Some other message"; 
// 输出为"Some &lt;strong&gt;other&lt;/strong&gt; message"

1、创建文本节点

document.createTextNode()可以用来创建新文本节点，它接收一个参数，即要插入节点的文本。
跟设置已有文本节点的值一样，这些要插入的文本也会应用HTML或XML编码。
1
let textNode = document.createTextNode("<strong>Hello</strong> world!");
创建新文本节点后，其ownerDocument 属性会被设置为document。但在把这个节点添加到文档树之前，我们不会在浏览器中看到它。

/*
以下代码创建了一个<div>元素并给它添加了一段文本消息：
*/
let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
document.body.appendChild(element);
/*
这个例子首先创建了一个<div>元素并给它添加了值为"message"的class属性，然后又创建了一个文本节点并添加到该元素。最后一步是把这个元素添加到文档的主体上，这样元素及其包含的文本会出现在浏览器中。
*/

一般来说一个元素只包含一个文本子节点。不过，也可以让元素包含多个文本子节点，如下面的例子所示：

let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
let anotherTextNode = document.createTextNode("Yippee!"); 
element.appendChild(anotherTextNode); 
document.body.appendChild(element);

在将一个文本节点作为另一个文本节点的同胞插入后，两个文本节点的文本之间不会包含空格。

2、规范化文本节点

DOM文档中的同胞文本节点可能导致困惑，因为一个文本节点足以表示一个文本字符串。同样，DOM文档中也经常会出现两个相邻文本节点。
normalize()方法可以合并相邻的文本节点。
- 该方法是在Node类型中定义的。
- 在包含两个或多个相邻文本节点的父节点上调用normalize()时，所有同胞文本节点会被合并为一个文本节点，这个文本节点的nodevalue就等于之前所有同胞节点nodevalue拼接在一起得到的字符串。

let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
let anotherTextNode = document.createTextNode("Yippee!"); 
element.appendChild(anotherTextNode); 
document.body.appendChild(element); 
alert(element.childNodes.length); // 2 
element.normalize(); 
alert(element.childNodes.length); // 1 
alert(element.firstChild.nodeValue); // "Hello world!Yippee!"

3、拆分文本节点

splitText()：方法可以在指定的偏移位置拆分nodevalue，将一个文本节点拆分成两个文本节点。
- 拆分之后，原来的文本节点包含开头到偏移位置前的文本，新文本节点包含剩下的文本。
- 方法返回新的文本节点，具有与原来的文本节点相同的parentNode。

let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
document.body.appendChild(element); 
let newNode = element.firstChild.splitText(5); 
alert(element.firstChild.nodeValue); // "Hello" 
alert(newNode.nodeValue); // " world!" 
alert(element.childNodes.length); // 2