zoukankan      html  css  js  c++  java
  • Text类型

    文本节点由Text类型表示:包含的是可照字面解释的纯文本内容。纯文本可以包含转义的HTML字符,但不包含HTML代码

    nodeType  3

    nodeName  #text

    nodeValue  节点所包含的文本

    parentElement  是一个Element

    不支持子节点

    nodeValue属性和data属性访问Text节点包含文本,nodevalue的修改也可以反映到Data上来

    appendData(text);  //添加到文本节点的末尾

    deleteData(offset,count)  //从offset指定位置,删除count个字符

    insertData(offset,text)    从offset指定位置插入text

    replaceData(offset,count,text)  用text替换从offset位置开始的count个字符

    splitText(offset)  从offset指定位置将文本节点分为两个文本节点

    substringData(offset,count)  提取从offset位置开始的count个字符

    实例:

    var oP = document.getElementsByTagName('p')[0];
            console.log(oP.childNodes[0].__proto__);
            //---------------------------------------
            oP.childNodes[0].appendData(',你是认真的吗?');//在文本节点后边添加文本
            console.log(oP.childNodes[0].nodeValue);
            //---------------------------------------
            oP.childNodes[0].deleteData(0,2);//文本节点删除字符0开始位置2删除个数
            console.log(oP.childNodes[0].nodeValue);
            //---------------------------------------
            oP.childNodes[0].insertData(0,'减肥');//文本节点插入字符,0开始位置
            console.log(oP.childNodes[0].nodeValue);
            //---------------------------------------
            oP.childNodes[0].replaceData(4,4,'xxxx');//文本节点替换4开始位置第二个4替换个数
            console.log(oP.childNodes[0].nodeValue);
            //---------------------------------------
            console.log(oP.childNodes);//[text, span]
            oP.childNodes[0].splitText(4);//从4位置断开变为两个文本节点
            console.log(oP.childNodes);//[text, text, span]
            //console.log(oP.childNodes[0]);
            //console.log(oP.childNodes[1]);
            //console.log(oP.childNodes[2]);
    
            //---------------------------------------
            /*
                重新合并在一起
            */
            oP.childNodes[0].appendData(oP.childNodes[1].nodeValue);
            oP.replaceChild(oP.childNodes[2],oP.childNodes[1]);
            //oP.removeChild( oP.childNodes[2] );
            console.log( oP.childNodes );
            console.log( oP.childNodes[2] );
            console.log( Object.prototype.toString.call(oP.childNodes));//childNodes并不是数组

    firstChild属性指第一个节点 

    1、创建文本节点

    document.createTextNode(‘插入节点中的文本’)创建新的文本节点

    创建文本节点的同时,也会为其设置ownerDocument属性,

    生成节点必须添加到文档书中,否则不会显示在浏览器中

    document.createElement('标签');//创建一个新的元素

    <body>
        <script>
            var d1 = document.createElement('div');
            d1.className = 'div1';
            var t1 = document.createTextNode('减肥就到可丽可心!');
            d1.appendChild(t1);
            var t2 = document.createTextNode('舒舒服服减肥!');
            d1.appendChild(t2);
            document.body.appendChild(d1);
        </script>
     </body>

     2、规范化文本节点

    如果在一个父级元素中相邻有好几个文本节点,可以用

    父级元素.normalize() 归一化:把文本节点合并为一个文本节点内容也合并

    浏览器在解析文档的时候,永远不会创建两个相邻的文本节点,只有进行Dom操作的时候可以。

    3、分割文本节点

    splitText()方法和normalize()方法相反,上篇文章已经说过;从指定的位置截开,并返回一个新的文本节点;

  • 相关阅读:
    [转]虚拟机下Redhat Linux系统的Mplayer安装实现
    结构定义中元素位置排列问题
    RPM 的介绍和应用
    yum 升级 rhe15
    Microsoft Access Data Types
    Eclipse配置SVN
    搭建本地YUM软件仓库
    2011年度最佳开源软件:Bossie奖结果公布
    Linux中文man在线手册
    PID算法
  • 原文地址:https://www.cnblogs.com/jokes/p/9483013.html
Copyright © 2011-2022 走看看