textContent 和 innerHTML 的区别

在操作 DOM 元素时，经常使用到获取元素的文本内容。在 JavaScript 中，textContent 和 innerHTML 是两个常用的属性。它们都可以用来获取或修改元素的文本内容，但是它们有一些重要的区别。

textContent

textContent 是一个 return-only 的属性，返回元素内所有文本内容，包括隐藏的文本。例如：

const el = document.querySelector('div');
const text = el.textContent;

如果有下面这样一个 HTML 结构：

<div>
  <span>Hello</span>
  <span style="display:none">World</span>
</div>

那么上面的代码将返回 "HelloWorld"。

innerHTML

innerHTML 可以用来获取或设置元素的 HTML 内容。如果将它设置为一个新的字符串，它会用一个新的 HTML 结构完全替换当前元素的内容。

const el = document.querySelector('div');
const html = el.innerHTML;
el.innerHTML = '<p>New content</p>';

上面的代码将把 <div> 元素的内容替换为 <p>New content</p>。

但是需要注意的是，将一个字符串直接设为元素的 innerHTML 时，如果字符串中包含特殊字符（例如 < 或 >）需要进行转义，否则会导致 HTML 解析错误。

区别

• textContent 仅包含文本内容，而 innerHTML 包含 HTML 结构和文本内容。
• textContent 是只读属性，不能用于设置 HTML 结构。
• 如果要修改元素的文本内容，使用 textContent 通常更快，因为它不会涉及到 HTML 解析器。