.textContent、.innerText 和 .innerHTML 的区别

在 JavaScript 中，.textContent、.innerText 和 .innerHTML 是用于操作 DOM 元素内容的常用属性。它们的功能相似，但在处理文本和 HTML 标签时有显著差异。

---

示例 HTML 结构

<div id="example">
  <p>Hello, <span style="display: none;">world!</span></p>
  <p>This is <b>bold</b> text.</p>
</div>

---

1. .textContent

.textContent 会返回元素及其子元素的纯文本内容，忽略所有 HTML 标签和 CSS 样式。

特点：

• 忽略 HTML 标签：只返回纯文本。
• 不关心 CSS 样式：即使某些元素被隐藏（如 display: none），其文本内容仍会被返回。
• 保留换行：如果 HTML 代码中有换行，输出的文本也会包含换行（但不是换行符）。

示例代码：

const element = document.getElementById('example');
console.log(element.textContent);

输出：

Hello, world!
This is bold text.

---

2. .innerText

.innerText 返回元素及其子元素的可见文本内容，受 CSS 样式影响。

特点：

• 受 CSS 样式影响：如果元素被隐藏（如 display: none 或 visibility: hidden），其文本内容不会被返回。
• 忽略文本样式：例如 font-weight: bold 不会影响 .innerText 的输出。
• 保留换行符：元素之间的换行符会被保留。

示例代码：

console.log(element.innerText);

输出：

Hello,
This is bold text.

---

3. .innerHTML

.innerHTML 返回元素内的所有 HTML 标签和文本内容，通常用于读取或写入带有 HTML 标签的内容。

特点：

• 包含 HTML 标签：返回完整的 HTML 结构。
• 可用于修改内容：可以通过赋值 .innerHTML 来动态插入 HTML 内容。
• 不关心 CSS 样式：返回的内容不受 CSS 样式影响。

示例代码：

console.log(element.innerHTML);

输出：

<p>Hello, <span style="display: none;">world!</span></p>
<p>This is <b>bold</b> text.</p>

---

对比总结

属性	返回值内容	是否受 CSS 影响	是否包含 HTML 标签	是否保留换行符
.textContent	纯文本，忽略 HTML 标签	否	否	是
.innerText	可见文本，受 CSS 影响	是	否	是
.innerHTML	包含 HTML 标签的完整内容	否	是	是

---

使用场景

1. .textContent：

   • 当只需要纯文本内容时。
   • 适合用于提取文本数据，忽略 HTML 标签和样式。

2. .innerText：

   • 当需要获取可见文本内容时。
   • 适合用于处理受 CSS 样式影响的文本。

3. .innerHTML：

   • 当需要读取或写入带有 HTML 标签的内容时。
   • 适合用于动态插入 HTML 内容。

---

注意事项

• 安全性：使用 .innerHTML 插入 HTML 内容时，需注意防范 XSS（跨站脚本攻击）风险。
• 性能：.innerText 的性能通常比 .textContent 差，因为它需要计算 CSS 样式。