【转】[JavaScript] textContent 用法

转自：kimi.ai

在 JavaScript 中，textContent 是一个用于操作 DOM 元素文本内容的属性。它允许你获取或设置指定元素及其子元素的文本内容。以下是关于 textContent 的详细用法和特点：

1. 获取文本内容

textContent 可以获取指定元素及其所有子元素的文本内容，忽略 HTML 标签。例如：

HTML复制

<div id="example">
    Hello, <strong>world</strong>!
</div>

JavaScript复制

const element = document.getElementById("example");
console.log(element.textContent); // 输出: "Hello, world!"

 

2. 设置文本内容

textContent 也可以用来设置元素的文本内容。当你设置 textContent 时，元素的所有子节点会被替换为一个新的文本节点。例如：

HTML复制

<div id="example">
    Hello, <strong>world</strong>!
</div>

JavaScript复制

const element = document.getElementById("example");
element.textContent = "New content";
console.log(element.innerHTML); // 输出: "<div id="example">New content</div>"

 

3. textContent 与 innerText 的区别

• textContent：
  • 获取或设置元素及其子元素的文本内容。
  • 不考虑 CSS 样式，包括隐藏元素的文本。
  • 不会触发页面的重新绘制（reflow），性能更好。
• innerText：
  • 获取或设置元素的可见文本内容，受 CSS 样式影响。
  • 忽略隐藏元素（如 display: none）的文本。
  • 触发页面的重新绘制（reflow），性能稍差。

4. 示例：动态更新文本内容

以下是一个动态更新文本内容的示例：

HTML复制

<input id="input" type="text" placeholder="Type something...">
<div id="output"></div>

JavaScript复制

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("input", () => {
    output.textContent = input.value;
});

 

5. 注意事项

• textContent 不会解析 HTML 标签，因此更安全，不会引发 XSS 攻击。
• 如果需要保留 HTML 标签，可以使用 innerHTML。

通过 textContent，你可以方便地操作 DOM 元素的文本内容，同时避免不必要的性能开销和安全问题。