JavaScript Document Object Model-Text type-JS Tutorial-php.cn

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

Copy after login

上面的例子中，第一个

中没有内容，所以它没有文本节点。在开始与结束标签之间只要存在内容，就有文本节点，所以虽然第二个

只包含一个空格，但它也有一个文本节点。该文本节点的nodeValue值就是一个空格。第三个

带有一个文本，它有一个文本节点，值为“jQuery之家”。

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

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

Copy after login

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

div.firstChild.nodeValue = "new string";

Copy after login

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

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

Copy after login

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

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

创建文本节点

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

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

Copy after login

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

元素，并在它里面添加一条信息：

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

Copy after login

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

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);

Copy after login

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

合并文本节点

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

Copy after login

浏览器在解析文本的时候永远不会创建相邻的文本节点，这只会在我们操纵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

Copy after login

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

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

Related labels：

JavaScript，文档对象模型，Text类型

source：php.cn

Previous article：JavaScript Document Object Model-Element type Next article：JavaScript Document Object Model-Comment type

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn