前面我们通过《介绍Text类型中appendData、deleteData、insertData、replaceData方法的使用方法》比较全面地介绍了Text文本类型方法，针对创建文本节点createTextNode()、规范化文本节点normalize()、分割文本节点splitText()三个重要的方法我们结合实例进行详细介绍。

1.创建文本节点

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

var textNode=document. createTextNode("Hello worldf");

在创建新文本节点的同时，也会为其设置ownerDocument属性。不过，除非把新节点添加到文 档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点。下面的代码会创建一个

元素并向其中添加一条消息：

var element=document. createElement("div");

element.className= "message";

var textNode=document. createTextNode( "BaiHeng");

element. appendChild( textNode);

document.body. appendChild( element);

这个例子创建了一个新

元素并为它指定了值为"message "的 class特性。然后，又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档的

元素中，这样就可以在浏览器中看到新创建的元素和文本节点了。

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

var element=document. createElement("div");

element. className= "message";

var textNode=document.createTextNode("BaiHeng!");

element. appendChild(textNode);

var anotherTextNode = document.createTextNode("network!");

element.appendChild(anotherTextNode);

document. body. appendChild( element);

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

2.规范化文本节点

DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串。另外，DOM文档中出现相邻文本节点的情况也不在少数，于是就催生了一个能够将相邻文本节

点合并的方法。这个方法是由Node类型定义的(因而在所有节点类型中都存在)，名叫normalize()。

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

一个例子：

var element=document. createElement("div");

element.className="message";

var textNode=document. createTextNode("BaiHeng Url:");

element.appendChild(textNode);

//例如：我们创建一个带网址的文本节点;

var anotherTextNode=document. createTextNode("http://www.jxbh.cn");

element. appendChild( anotherTextNode);

document.body. appendChild( element);

//做一些输出测试添加的效果;

alert(element.childNodes.length); //2

element.normalize();

alert(element.childNodes.length); //1

alert(element.firstChild.nodeValue); //"BaiHeng Url:http://www.jxbh.cn"

浏览器在解析文档时永远不会创建相邻的文本节点。这种情况只会作为执行DOM操作的结果出现。

3.分割文本节点

Text类型提供了一个作用与normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定

位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode相同。来看下面的例子：

var element=document. createElement("div");

element.className= "message";

var textNode=document. createTextNode("Hello BaiHeng!");

element. appendChild( textNode);

document. body. appendChild( element);

var newNode = element.firstChild.splitText(5);

alert(element.firstChild.nodeValue); //"Hello"

alert(newNode.nodeValue); //"BaiHeng"

alert(element.childNodes.length); //2

在这个例子中，包含"Hello BaiHeng"的文本节点被分割为两个文本节点，从位置5开始。位置5 是"Hello"和"BaiHeng!“之间的空格，因此原来的文本节点将包含字符串"Hello"，而新文本节点将包含文本"BaiHeng!(包含空格)。

分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络 http: //www.jxbh.cn 如转载请注明出处!