[JS] innerText vs textConent (详细, 二者差异)

简述

共同点: 获取子元素文本内容

• innerText:
  • 保留换行符 \n
  • 会考虑 display: none 和 visibility: hidden;
• textConent:
  • 不会保留换行符 \n
  • 不会考虑 display: none 和 visibility: hidden;
  • 性能更好

详述

情况1

    <p class="example">
      行一 <br>
      行二 <br>
    </p>

  let exampleEl = document.querySelector('.example');
  console.log(exampleEl.innerText); // 行一\n行二
  console.log(exampleEl.textContent); // 行一 行二

情况二

    <p class="example">
      行一<br>
      <span class="hidden">行二<br></span>
    </p>

.hidden {
  /*display: none;*/
  visibility: hidden;
}

  let exampleEl = document.querySelector('.example');
  console.log(exampleEl.innerText); // 行一
  console.log(exampleEl.textContent); // 行一行二

(END)