本文共 935 字，大约阅读时间需要 3 分钟。

• 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>