textContent和innerText有什么区别

textContent 和 innerText 都是用于获取或设置元素的文本内容的属性，但它们之间有一些区别。

• textContent 属性返回元素的所有文本内容，包括元素内部的所有文本和注释节点。而 innerText 属性仅返回元素内部可见的文本内容，忽略任何被 CSS 隐藏的文本和注释节点。

• textContent 属性会返回所有文本内容，包括文本节点和子元素的文本内容。而 innerText 属性将会尝试返回渲染为可见文本的内容，它会自动处理样式和布局，以确保只返回用户可看到的内容。

• textContent 属性对性能要求相对较低，因为它只是简单地返回元素的文本内容，不需要进行任何样式和布局的计算。而 innerText 属性会涉及到样式和布局的计算，因此在某些情况下可能会对性能有一些影响。

下面是一个简单的示例，帮助理解它们之间的区别：

<div id="myDiv">
  <span style="display: none;">隐藏的文本</span>
  可见文本
</div>

<script>
  const myDiv = document.getElementById('myDiv');

  console.log(myDiv.textContent); // 输出："\n  隐藏的文本\n  可见文本\n"
  console.log(myDiv.innerText); // 输出："可见文本"
</script>

在上面的例子中，textContent 会返回包括所有文本内容和换行符的字符串，而 innerText 只返回显示在页面上的可见文本。

需要注意的是，textContent 是一个标准属性，而 innerText 是一个非标准的属性，因此在一些特定的浏览器或应用环境中可能不被支持。为了保持跨浏览器的兼容性，可以考虑使用 textContent 属性。