JavaScript ドキュメント オブジェクト モデル - テキスト型

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

• nodeType的值为3。

• nodeName的值为“#text”。

• nodeValue的值为节点所包含的文本。

• parentNode是一个Element。

它的没有子节点。

可以通过nodeValue属性或data属性来访问Text节点包含的文本，这两个属性中包含的值相同。对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为止处的字符串。

除了以上方法之外，Text节点还有一个length属性，保存着节点中字符的个数。而且nodeValue.length和data.length中也保存着相同的值。

在默认的情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须有内容存在。例如：

<!-- 没有内容，也就没有文本节点 -->
<div></div>
 
<!-- 带有一个空格，所以有一个文本节点 -->
<div> </div>
 
<!-- 有文本内容，所以有一个文本节点 -->
<div>jQuery之家</div>

上面的例子中，第一个dc6dce4a544fdca2df29d5ac0ea9906b中没有内容，所以它没有文本节点。在开始与结束标签之间只要存在内容，就有文本节点，所以虽然第二个dc6dce4a544fdca2df29d5ac0ea9906b只包含一个空格，但它也有一个文本节点。该文本节点的nodeValue值就是一个空格。第三个dc6dce4a544fdca2df29d5ac0ea9906b带有一个文本，它有一个文本节点，值为“jQuery之家”。

要访问文本子节点，可以使用下面的方法：

var textNode = div.firstChild;    //或者div.childNodes[0]

在取得文本节点的引用之后，就可以像下面的样子来修改它了：

div.firstChild.nodeValue = "new string";

如果这个节点当前存在于文档树中，那么修改文本节点的结构会立刻得到反映。另外，在修改文本节点的时候需要注意，此时的字符串会经过HTML（或XML）编码。也就是说，大于号、小于号或引号都会被转义，例如：

div.firstChild.nodeValue = "new <strong>string</strong>";

上面的代码会将文本输出为：new <strong>string</strong>，在经过浏览器解析之后，呈现的文本为：new 8e99a69fbe029cd4e2b854e244eab143string128dba7a3a77be0113eb0bea6ea0a5d0。

所有的浏览器都可以通过js脚本来访问Text类型的构造函数和原型，包括IE8及以上的浏览器。

 创建文本节点

我们可以使用document.createTextNode()方法来创建新的文本节点，这个方法接收一个参数：要插入节点中的文本。与设置已有的文本值一样，作为参数的文本也将按照HTML或XML的格式进行编码：

var textNode = document.createTextNode("<strong>hello</strong> world");

在创建新的文本节点的同时，也会设置其ownerDocument属性。但是，只有当你把新的节点添加到文档中已存在的节点时，才能在浏览器中看到它。下面的代码创建一个dc6dce4a544fdca2df29d5ac0ea9906b元素，并在它里面添加一条信息：

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

一般情况下，每一个元素只有一个文本节点。不过在某些情况下也可能包含多个文本节点，例如：

var element = document.createElement("div");
element.className = "message";
 
var textNode = document.createTextNode("hello world");
element.appendChild(textNode);
 
var otherNode = document.createTextNode("javascript");
element.appendChild(otherNode);
 
document.body.appendChild(element);

如果两个文本节点是相邻的兄弟节点，那么这两个节点就会连起来显示，中间不会有空格。

 合并文本节点

DOM文档中存在相邻的兄弟文本节点很容易会导致混乱，因为会分不清哪个文本节点代表哪个字符串。另外，DOM文档中出现相邻的相邻兄弟节点的情况也十分普遍，这就使得我们必须有一个方法来将相邻的文本节点进行合并。这个方法是由Node类型定义的normalize()方法。

如果在一个包含两个或多个文本节点的元素上调用normalize()方法，则会将所有的文本节点合并为一个节点。结构节点的nodeValue等于合并前每个文本节点的nodeValue值相加起来。例如下面的例子：

var element = document.createElement("div");
element.className = "message";
 
var textNode = document.createTextNode("hello world!");
element.appendChild(textNode);
 
var otherNode = document.createTextNode("javascript");
element.appendChild(otherNode);
 
document.body.appendChild(element);
 
console.info(element.childNodes.length);    //值为2
element.normalize();
console.info(element.childNodes.length);    //值为1
console.info(element.firstChild.nodeValue); //hello world!javascript

浏览器在解析文本的时候永远不会创建相邻的文本节点，这只会在我们操纵DOM时产生。

 分割文本节点

Text类型还提供了一个作用与normalize()方法相反的方法：splitText()。这个方法会将一个文本节点分割成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始位置到指定位置之前的内容，新文本节点将包含剩下的文本内容。这个方法会返回一个新文本节点，该节点与原来节点的parentNode相同。例如下面的例子：

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

上面的例子中，包含"hello world!"的文本节点被分割为两个文本节点，分割点从第五个字符开始。位置5是字符"hello"和"wolrd!"之间的空格，因此，原来的文本将包含字符"hello"，而新文本将包含字符" wolrd!"（包含空格）。

以上就是JavaScript文档对象模型-Text类型的内容，更多相关内容请关注PHP中文网（www.php.cn）！