jacascript DOM節點——節點內容

前言：這是筆者學習以後本身的理解與整理。若是有錯誤或者疑問的地方，請你們指正，我會持續更新！

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>