innerHTML&outerHTML&innerText&outerText實例辨析

有時候作項目會用到上述四個DOM屬性來獲取HTML文檔裏的一些內容，但對他們的區別仍是有些模糊，因此寫了幾個簡單的函數，經過打印在控制檯上的結果看看他們之間的區別。

代碼：

<div id="outer">
    outer
    <p id="innerone">inner one</p>
    between
    <p id="innertwo">inner two</p>
  </div>
  <div>
    <button onclick="showInnerHTML()">innerHTML</button>
    <button onclick="showOuterHTML()">outerHTML</button>
    <button onclick="showInnerText()">innerText</button>
    <button onclick="showOuterText()">outerText</button>
  </div>

var showInnerHTML = function(){
    console.log(document.getElementById("outer").innerHTML);
  }
  var showOuterHTML = function(){
    console.log(document.getElementById("outer").outerHTML);
  }
  var showInnerText = function(){
    console.log(document.getElementById("outer").innerText);
  }
  var showOuterText = function(){
    console.log(document.getElementById("outer").outerText);
  }

innerHTML

控制檯結果：

總結：獲取當前節點下子節點的HTML文本，若是子節點只有文本節點，則它的輸出效果和innerText相同

outerHTML

控制檯結果：

總結：得到包括當前節點自己以及節點下子節點的HTML文本

innerText

控制檯結果：

總結：得到當前節點子節點內的純文本內容

outerText

控制檯結果：

總結：得到當前節點以及子節點內的純文本內容（總感受和innerText的輸出效果是同樣的，沒想到什麼例子能夠有不一樣的效果，若是你有，歡迎評論(#^.^#)）

疑問：能夠看到innerText的輸出結果中，中間有一個空行，並非很懂……

雖然是簡單的例子，可是經過代碼把概念區分了一下，也是挺好的~若是有寫得不足的，歡迎指正留言~不勝感激！