• 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()方法相反,上篇文章已经说过;从指定的位置截开,并返回一个新的文本节点;

  • 相关阅读:
    jQuery EasyUI API 中文文档 可调整尺寸
    jQuery EasyUI API 中文文档 链接按钮(LinkButton)
    jQuery EasyUI API 中文文档 手风琴(Accordion)
    jQuery EasyUI API 中文文档 表单(Form)
    jQuery EasyUI API 中文文档 组合(Combo)
    jQuery EasyUI API 中文文档 布局(Layout)
    jQuery EasyUI API 中文文档 拆分按钮(SplitButton)
    jQuery EasyUI API 中文文档 菜单按钮(MenuButton)
    jQuery EasyUI API 中文文档 搜索框
    jQuery EasyUI API 中文文档 验证框(ValidateBox)
  • 原文地址:https://www.cnblogs.com/jokes/p/9483013.html
Copyright © 2020-2023  润新知