DOM之Text类型

Text类型

介绍

文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符，但不能包含 HTML 代码。

Text类型特点：

创建文本节点

document.createTextNode()

可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点 中的文本。

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

规范化文本节点

normalize()

如果在一个包含两个或多个文本节点的父元素上调用 normalize()方法，则会将所有文本节点合并成一个 节点，结果节点的 nodeValue 等于将合并前每个文本节点的 nodeValue 值拼接起来的值。

var element = document.createElement("div"); element.className = "message";
var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode);
var 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!"

分割文本节点

splitText()

这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位 置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的 parentNode 相同。

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

- RZeeY