innerText 与 textContent - Javascript

在Javascript中，有两个常用的属性用于获取和设置HTML元素的文本内容，它们分别是innerText和textContent。虽然它们在大多数情况下是相似的，但是它们之间有一些微妙的差异。在本文中，我们将深入研究innerText与textContent的不同之处，以及何时使用它们。

innerText

innerText属性返回一个元素的文本内容，但不包括任何HTML标记。它也可以用于设置元素的文本内容。以下是一个例子：

const element = document.getElementById('myElement');
const text = element.innerText; // 获取元素的文本内容
element.innerText = 'new text'; // 设置元素的文本内容

需要注意的是，innerText对于隐藏元素不可见。例如，如果一个元素被设置为display:none;，那么innerText将返回空字符串。

textContent

textContent属性返回一个元素的文本内容，包括所有HTML标记。它也可以用于设置元素的文本内容。以下是一个例子：

const element = document.getElementById('myElement');
const text = element.textContent; // 获取元素的文本内容
element.textContent = 'new text'; // 设置元素的文本内容

而与innerText不同的是，textContent对于隐藏元素是可见的。例如，如果一个元素被设置为display:none;，那么textContent将返回全部文本内容。

区别

那么，这两个属性有何不同之处？主要有以下三个方面：

1. innerText会受到CSS样式和display属性的影响，而textContent不会。例如，如果一个元素设置了display:none;，那么innerText将返回空字符串，而textContent将返回该元素的全部文本内容。

2. innerText只支持可见文本的操作，而textContent支持包括<script>和<style>标记在内的所有文本的操作。

3. innerText执行速度更快，因为它不需要处理HTML元素的样式和布局。而textContent需要考虑这些因素，所以会稍微慢一些。

建议

在大多数情况下，我们建议使用textContent属性。因为它返回元素的全部文本内容，并且更加可靠。然而，如果你只需要获取或设置一个元素的可见文本内容，那么innerText可能更适合你的需求。