JavaScript中DOM节点层次Text类型

文本节点

标签之间只要有一点内容都会有文本节点，包括空格

创建文本节点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