前言:這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方,請大家指正,我會持續更新! innerHTML 在讀模式下,返回與調用元素的所有子節點(包括元素、註釋和文本節點)對應的 HTML 標記; 在寫模式下,innerHTML 會根據指定的值創建新的 DOM 樹,然後用這個 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