innerHTML、outerHTML、textContent、innerText、outerText实例属性的区别

1.innerHTML和outerHTML区别

//HTML
<div id="d">
  <p>Content</p>
  <p>Further Elaborated</p>
</div>

//JS
const d = document.getElementById("d");

//innerHTML
console.log(d.innerHTML);
//输出
<p>Content</p><p>Further Elaborated</p>

//outerHTML
console.log(d.outerHTML);
//输出
<div id="d"><p>Content</p><p>Further Elaborated</p></div>

2.textContent和innerText区别

//HTML
<p id="source">
  <style>
    #source {
      color: red;
    }
    #text {
      text-transform: uppercase;
    }
  </style>
  <span id="text">
    Take a look at<br />
    how this text<br />
    is interpreted below.
  </span>
  <span style="display:none">HIDDEN TEXT</span>
</p>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>

//JS
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

//textContent
textContentOutput.value = source.textContent;
//输出
#source {
  color: red;
}
#text {
  text-transform: uppercase;
}
  
  
Take a look at
how this text
is interpreted below.
  
HIDDEN TEXT

//innerText
innerTextOutput.value = source.innerText;
//输出
TAKE A LOOK AT
HOW THIS TEXT
IS INTERPRETED BELOW.

3.innerText和outerText区别

//HTML
<div>
  <p>Change Me</p>
</div>

//innerText
p.innerText = "Changed!"
//输出
<div>
  <p>Changed!</p>
</div>

//outerText
p.outerText = "Changed!"
//输出
<div>
   Changed!
</div>