十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

结合实例介绍文本节点中createTextNode()、normalize()、splitText()方法的使用方法

百恒网络 2016-11-22 650

前面我们通过《介绍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 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×