jacascript DOM節點——節點內容

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！

innerHTML

　　在讀模式下，返回與調用元素的所有子節點(包括元素、註釋和文本節點)對應的 HTML 標記；

　　在寫模式下，innerHTML 會根據指定的值創建新的 DOM 樹，然後用這個 DOM 樹完全替換調用元素原先的所有子節點；

　　如果將 innerHTML 屬性設為空，等於刪除所有它包含的所有節點；

　　對 innerHTML 屬性用"+="操作符重覆追加一小段文本通常效率低下，因為它既要序列化又要解析；

outerHTML

　　outerHTML 同樣可讀可寫，與 innerHTML 相比，它包含被查詢元素的開始和結束標簽（包含它自己）。

　　在讀模式下 outerHTML 返回調用它的元素及所有子節點的 HTML 標簽；

　　在寫模式下，outerHTML 會根據指定的 HTML 字元串創建新的 DOM子樹，然後用這個DOM子樹完全替換調用元素；

        <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.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>

參考資料

　　大神的講解更清晰，他的其他隨筆也很好， http://www.cnblogs.com/xiaohuochai/p/5823716.html