首页 > 代码库 > javascript高级程序设计之文本节点

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

2024-07-21 12:35:14   214人阅读

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解析技术。








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


联系
我们