js 的 textContent, innerText 区别

• textContent, innerText 都可以获取标签内文本内容
• textContent 获取标签内文本内容, 不区分元素是否隐藏, 而且还会获取到 <style> ,<script> 内容
• innerText 只能获取页面上展示的文本内容, 即如果是隐藏元素的文本内容 (display: none; 或者 visibility: hidden) 或者 <style> ,<script> 内容都无法获取

<h1>
  标签内文本1
  <b style="display: none">display: none</b>
  <b style="visibility: hidden">visibility: hidden</b>
  <script>let username = '你好鸭'</script>
  <p> 标签内文本2</p>
</h1>

<!--
  script 放在 /html 前面
    考虑的是按照代码顺序加载, 优先加载 html, 再执行 js 语句

  script 使用 src 属性, 则 script 中包含的 js 内容会被忽略

-->
<script>
  let myHeading = document.querySelector('h1');

  /*
  textContent, innerText 区别
    textContent 返回标签内的文本内容 (包含 style 或者 script 的内容), 不区分元素是否隐藏, 都会返回
    innerText 返回标签内的显示在页面上的文本内容, 如果元素没有显示 (例如 display:none), 那么不会包含这部分文本内容
   */
  // .textContent 表示里面的文本内容
  console.log(`myHeading.textContent = ${myHeading.textContent}`);
  console.log(`myHeading.innerText = ${myHeading.innerText}`);

  myHeading.textContent = 'Hello world!';

</script>