JavaScript HTML DOM节点类型之Text类型

 2015年12月06日    592     声明


HTML DOM中,文本节点用Text类型表示。Text类型用于表示ElementAttr类型的文本内容。


1. Text类型

创建一个Text节点类型可以使用以下两种方法:

// 使用Document对象创建
var text1 = document.createTextNode('itbilu.com');

// 使用构造函数创建
var text2 = new Text('itbilu.com');

Text类型的节点具有以下特点:

  • nodeType值为3
  • nodeName值为"#text"
  • nodeValue值是节点的文本内容
  • parentNode是一个Element类型

Text类型表示HTML元素的文本内容,是一种没有HTML标签的Element元素。

Text类型没有子节点,在一个新建的文档中,每个文本块都有一个Text类型的节点。随着文档内容的修改,一个文本块中可能会包含多个Text类型的节点,这时可以使用Node.normalize()方法将多个Text对象合并。

<!--没有内容,所有没有文本节点-->
<p></p>
<!--当有空格或文字内容时都会存在一个文本节点-->
<p> </p>
<p>这是一个文本节点</p>


2. Text类型的访问与修改

对于如下一个文本节点:

<p>这是一个文本节点</p>

打印其文本节点内容,并将其内容修改:

var p = document.getElementsByTagName('p')[0];
var textNode = p.firstChild;  // 也可以使用 p.childNodes[0]访问
console.log(textNode.nodeValue);
textNode.nodeValue = 'itbilu.com';

通过TextnodeValue属性可以访问其内容,该属性是可读写的,你可以通过这个属性修改文本内容,内容修改会立即在文档树上表现出来。


3. 创建Text类型节点

创建文本类型的节点一般使用Document对象的createTextNode()方法,也可以使用构造函数Text。这两个方法都接受一个参数,表示要插入文本节点的内容,当节点内容包含HTML或XML内容时,HTML或XML也将做为文本输出。

var p = document.createElement('p');
var text = document.createTextNode('itbilu.com');
p.appendChild(text);

document.body.appendChild(p);  // itbilu.com

一般来说,每个元素只有一个文本节点,但对文档进行多次操作后可能会包含多个文本节点。当多个文本节点是相邻的兄弟节点时,文本内容会连续输出,中间不会有空格或分隔符。

var p = document.createElement('p');
var text = document.createTextNode('IT笔录:');
p.appendChild(text);

var text2 = document.createTextNode('itbilu.com'); 
p.appendChild(text2);

document.body.appendChild(p);  // IT笔录:itbilu.com