文本节点由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>
上面的例子中,第一个<div>中没有内容,所以它没有文本节点。在开始与结束标签之间只要存在内容,就有文本节点,所以虽然第二个<div>只包含一个空格,但它也有一个文本节点。该文本节点的nodevalue值就是一个空格。第三个<div>带有一个文本,它有一个文本节点,值为“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 <strong>string</strong>。
所有的浏览器都可以通过js脚本来访问text类型的构造函数和原型,包括ie8及以上的浏览器。
创建文本节点
我们可以使用document.createtextnode()方法来创建新的文本节点,这个方法接收一个参数:要插入节点中的文本。与设置已有的文本值一样,作为参数的文本也将按照html或xml的格式进行编码:
var textnode = document.createtextnode("<strong>hello</strong> world");
在创建新的文本节点的同时,也会设置其ownerdocument属性。但是,只有当你把新的节点添加到文档中已存在的节点时,才能在浏览器中看到它。下面的代码创建一个<div>元素,并在它里面添加一条信息:
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类型的内容。