javascript高级程序设计之文本节点

1、创建文本节点：

 <script type="text/javascript">
        function addNode(){

            var element = document.createElement("div");
            element.className = "message";

            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);

            document.body.appendChild(element);
        }

    </script>

1.1 出现的多个文本子节点情况：

    <script type="text/javascript">
        function addNode(){

            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);
            //插入到文档body中
            document.body.appendChild(element);
        }

    </script>

2、规范化文本节点:normalize()

    <script type="text/javascript">
        function addNode(){

            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);
            //添加到文档的body元素中
            document.body.appendChild(element);

            alert(element.childNodes.length);  //2

            <span style="color:#ff0000;">element.normalize();//规范化过程</span>
            alert(element.childNodes.length);  //1
            alert(element.firstChild.nodeValue);  //"Hello World!Yippee!"

        }

    </script>

3、分割文本节点：

其效果跟normalize()方法相反：splitText().将一个节点分为两个，即按照指定的位置分割nodeValue值。

    <script type="text/javascript">
        function addNode(){

            var element = document.createElement("div");
            element.className = "message";

            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);

            document.body.appendChild(element);

           <span style="color:#ff0000;"> var newNode = element.firstChild.splitText(5);</span>
            alert(element.firstChild.nodeValue);  //"Hello"
            alert(newNode.nodeValue);             //" world!"
            alert(element.childNodes.length);     //2

        }

    </script>

分割节点是文本节点提取数据的一种常用DOM解析技术。