jacascript DOM节点——节点内容

Posted 2020-09-11 学习的时候不说话

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

innerhtml

　　在读模式下，返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记；

　　在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点；

　　如果将 innerHTML 属性设为空，等于删除所有它包含的所有节点；

　　对 innerHTML 属性用"+="操作符重复追加一小段文本通常效率低下，因为它既要序列化又要解析；所以我们一般把"+="操作符重复追加的文本用变量存起来，然后再把变量传给 innerHTML ；

outerHTML

　　outerHTML 同样可读可写，与 innerHTML 相比，它包含被查询元素的开始和结束标签（包含它自己）。

　　在读模式下 outerHTML 返回调用它的元素及所有子节点的 HTML 标签；

　　在写模式下，outerHTML 会根据指定的 HTML 字符串创建新的 DOM子树，然后用这个DOM子树完全替换调用元素；

    <div class="wrapper">
        aaaaaaaaa
        <span class="test">hello world!</span>
        bbbbbbbbb
    </div>
    <div class="addinnerhtml"></div>
    <script type="text/javascript">
        var oWrapper = document.getElementsByClassName(\'wrapper\')[0];
        var oAddhtml = document.getElementsByClassName(\'addinnerhtml\')[0];
        //写入
        oAddhtml.innerHTML = \'<input type="text" placeholder="添加成功">\';

        console.log(oWrapper.innerHTML);
        //aaaaaaaaa<span class="test">hello world!</span>bbbbbbbbb
        console.log(oWrapper.outerHTML);
        //<div class="wrapper">aaaaaaaaa<span class="test">hello world!</span>bbbbbbbbb</div>
    </script>

 

innerText

　　innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本；

　　在通过 innerText 读取值时，它会按照由浅入深地顺序，将子文档树中的所有文本拼接起来；

　　在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点；

　　设置 innerText 属性只会生成当前节点的一个子文本节点Text。因此，可以利用将 innerText 设置为等于 innerText 来去掉当前元素内部的所有 HTML 标签；

outerText

　　在读取文本值时，outerText 与 innerText 的结果完全一样；

　　但在写模式下，outerText 不只是替换调用它的元素的子节点，而是会替换整个元素；

textContent

　　textContent 属性与 innerText 属性类似，该属性可读写。IE8及以下不支持；

　　在读模式下，返回当前节点和它的所有后代节点的文本内容；

　　在写模式下，结果会删除元素的所有子节点，插入包含相应文本值的文本节点；

　　与 innerText 不同的是，textContent 属性不仅属于元素节点 ElementNode，而是属于所有节点 Node（包括文本节点）；

        <div class="wrapper">
            aaaaaaaaa
            <span class="test">hello world!</span>
            bbbbbbbbb
        </div>
        <script type="text/javascript">
            var oWrapper = document.getElementsByClassName(\'wrapper\')[0];
            
            console.log(oWrapper.innerText);//aaaaaaaaa hello world! bbbbbbbbb
            console.log(oWrapper.outerText);//aaaaaaaaa hello world! bbbbbbbbb
            
            console.log(oWrapper.textContent);//aaaaaaaaa hello world! bbbbbbbbb
            
            var oText = oWrapper.childNodes[0];
            console.log(oText.textContent);//aaaaaaaaa
            console.log(oText.innerText);//undefined
        </script>