看几个例子。
<!-- 没有内容,也就没有文本节点--> <div></div> <!-- 有空格,因而有一个文本节点--> <div> </div> <!-- 有内容,因而有一个文本节点--> <div>Hello World!</div>上面代码给出的第一个<div>元素没有内容,因此也就不存在文本节点。开始与结束标签之间只要
var textNode = div.firstChild; //或者div.childNodes[0]在取得了文本节点的引用后,就可以像下面这样来修改它了。
div.firstChild.nodeValue = "Some other message";
//输出结果是"Some <strong>other</strong> message" div.firstChild.nodeValue = "Some <strong>other</strong> message";应该说,这是在向DOM 文档中插入文本之前,先对其进行HTML 编码的一种有效方式。
var textNode = document.createTextNode("<strong>Hello</strong> world!");在创建新文本节点的同时,也会为其设置ownerDocument 属性。不过,除非把新节点添加到文档
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 anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element);如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); alert(element.childNodes.length); //2 element.normalize(); alert(element.childNodes.length); //1 alert(element.firstChild.nodeValue); // "Hello world!Yippee!"浏览器在解析文档时永远不会创建相邻的文本节点。这种情况只会作为执行DOM 操作的结果出现。
3.
分割文本节点
Text 类型提供了一个作用与normalize()相反的方法:splitText()。这个方法会将一个文本节
点分成两个文本节点,即按照指定的位置分割nodeValue 值。原来的文本节点将包含从开始到指定位
置之前的内容,新文本节点将包含剩下的文本。这个方法会返回一个新文本节点,该节点与原节点的
parentNode 相同。来看下面的例子。
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" world!" alert(element.childNodes.length); //2在这个例子中,包含"Hello world!"的文本节点被分割为两个文本节点,从位置5 开始。位置5