文本节点
标签之间只要有一点内容都会有文本节点,包括空格
创建文本节点document.createTextNode()
可以使用 document.createTextNode 创建新文本节点
一般情况下,每个元素只有一个文本节点
但是在某些情况下也会有多个节点,例子如下
//创建父节点
var element=document.createElement("div");
element.className="message";
//添加第一个文本节点
var textNode=document.createTextNode("节点一");
element.appendChild(textNode);
//添加第二个文本节点
var atextNode=document.createTextNode("节点二");
element.appendChild(atextNode);
//输出到页面
document.body.appendChild(element);
console.log(element.childNodes);
合并文本节点normalize()
如果一个元素中有多个文本节点,容易乱套,所以可以使用normalize()方法来合并文本节点
var element=document.createElement("div");
element.className="message";
var textNode=document.createTextNode("节点一");
element.appendChild(textNode);
var atextNode=document.createTextNode("节点二");
element.appendChild(atextNode);
alert(element.childNodes.length); // 2
element.normalize(); //合并文本节点
alert(element.childNodes.length); // 1
分割文本节点splitText()
Text类型中有一个方法splitText(),与normalize()恰好相反可以将一个节点分割成为两个节点。
var element=document.createElement("div");
element.className="message";
var textNode=document.createTextNode("hello world");
element.appendChild(textNode);
alert(element.childNodes.length); // 1
element.firstChild.splitText(5);
alert(element.childNodes.length); // 2
alert(element.childNodes[0].nodeValue); // hello
alert(element.childNodes[1].nodeValue); // world