zoukankan      html  css  js  c++  java
  • 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
    
  • 相关阅读:
    [POJ1743]Musical Theme
    [HDU5343]MZL's Circle Zhou
    [ZJOI2015]诸神眷顾的幻想乡
    [SDOI2016]生成魔咒
    [POI2000]Repetitions
    [SPOJ-NSUBSTR]Substrings
    [SPOJ-LCS2]Longest Common Substring II
    [SPOJ-LCS]Longest Common Substring
    [SDOI2010]地精部落
    [HNOI2003]消防局的设立
  • 原文地址:https://www.cnblogs.com/wangyue99599/p/7418946.html
Copyright © 2011-2022 走看看