玩笑过后

导航

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

 

posted on 2018-08-15 18:00  玩笑过后  阅读(701)  评论(0编辑  收藏  举报