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的输出结果中，中间有一个空行，并非很懂……

虽然是简单的例子，可是经过代码把概念区分了一下，也是挺好的~若是有写得不足的，欢迎指正留言~不胜感激！