《JavaScript高级程序设计（第3版）》学习笔记37：chapter_10-1.4 Text类型_在默认情况下,每个可以包含内容得元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_44582681/article/details/100905592

让学习“上瘾”，成为更好的自己！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Text类型</title>
</head>

<body>
    <!-- 在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在 -->
    <!-- 没有内容，也就没有文本内容 -->
    <div id="div1"></div>
    <!-- 有一个空格，因而有一个文本节点 -->
    <div id="div2"> </div>

    <div id="div3">hello world！&lt;strong&gt;fadfadfafd&lt;\strong&gt;</div>







    <script>
        /*
    文本节点由Text类型表示，包含的是纯文本内容，可以包含转移后的HTML字符，但不能是HTML代码
    1, nodeType: 3
    2, nodeName: "#text"
    3, nodeValue: 节点包含的文本  == data
    4, parentNode: Element
    5, 不支持（没有）子节点 

    几个方法：
    appendData(text)
    deleteData(offset, count)
    insertData(offset, text)
    replaceData(offset, count, text)
    splitText(offset)
    substringData(offset, count)

    length属性：保存节点中字符的数目 == nodeValue.length  == data.length


    
    一，创建文本节点（见下）



    二，规范化文本节点（见下）



    三，分隔文本节点（见下）


    
    */
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');
        var textNode = div2.childNodes[0];
        textNode.nodeValue = 'other sentences!!'
        console.log(textNode.nodeValue.length == textNode.data.length);
        textNode.appendData('fsjfsjds');
        textNode.deleteData(3, 2);

        // 修改文本节点时，字符串会先经过HTML（或XML，取决于文档类型）编码！
        textNode.nodeValue = 'some<strong>we are</strong>ioioio!';
        console.log(textNode.nodeValue);
        // 在向DOM文档插入文本之前，先对其进行了HTML编码！！



        // 一，创建文本节点
        //  document.createTextNode(): 一个参数，要插入节点中的文本 
        //  创建新文本节点的同时，也会为其设置ownerDocument属性
        // 除非我们把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点

        // var element = document.createElement('div');
        // element.className = 'message';

        // var textNode = document.createTextNode('hello world!');
        // element.appendChild(textNode);

        // document.body.appendChild(element);

        // 一般情况下，每个元素只有一个文本子节点，但某些情况下可能有多个，如下书写存在2个文本子节点

        // var element = document.createElement('div');
        //     element.className = 'message';

        //     var textNode = document.createTextNode('hello world!');
        //     element.appendChild(textNode);

        //     var anotherTextNode = document.createTextNode('yiyiy');
        //     element.appendChild(anotherTextNode);
        //     document.body.appendChild(element);
        //     console.log(element.childNodes);
        // 如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连接起来显示，中间不会有空格



        //  二，规范化文本节点  -->  normalize()

        // 如果在一个包含两个或者多个文本节点的父元素上调用normalize()方法，则会将所有的文本节点合并为一个节点，
        // 结果节点的nodeValue等于将合并前每个文本节点的nodeValue值的拼接起来的值

        // var element = document.createElement('div');
        //     element.className = 'message';

        //     var textNode = document.createTextNode('hello world!');
        //     element.appendChild(textNode);

        //     var anotherTextNode = document.createTextNode('yiyiy');
        //     element.appendChild(anotherTextNode);
        //     document.body.appendChild(element);
        //     console.log(element.childNodes.length);  // 2
        //     console.log(element.firstChild.nodeValue);

        //     element.normalize();
        //     console.log(element.childNodes.length);  // 1
        //     console.log(element.firstChild.nodeValue); 


        // 浏览器在解析文档的时候永远不会创建相邻的文本节点，这种情况只会作为执行DOM操作的结果出现

        // 三，分隔文本节点

        // 与normalize()方法相反的方法: splitText() --> 将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值
        // 原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本
        // 该方法将会返回一个新文本节点，其parentNode与原节点的一样

        var element = document.createElement('div');
        element.className = 'message';

        var textNode = document.createTextNode('123hello world!');
        element.appendChild(textNode);

       
        document.body.appendChild(element);
       
       var newNode = element.firstChild.splitText(5);
       console.log(element.firstChild.nodeValue);  
       console.log(newNode.nodeValue); 
       console.log(element.childNodes.length);  // 2

       
    </script>



</body>

</html>```