JavaScript textContent
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 textContent 属性。该属性对于处理 DOM 元素中的文本内容至关重要，它提供了一种安全高效的操作文本的方式。
基本定义
textContent 属性用于获取或设置节点及其所有后代元素的文本内容。与 innerHTML 不同，它不会解析 HTML 标签，因此对 XSS 攻击更安全。
在获取文本内容时，textContent 会返回元素内的所有文本，包括隐藏的元素。在设置文本内容时，任何现有内容都会被新文本完全替换。
基本 textContent 用法
此示例演示了如何使用 textContent 获取和设置文本内容。
<!DOCTYPE html>
<html>
<head>
<title>Basic textContent</title>
</head>
<body>
<div id="demo">Initial text content</div>
<script>
const element = document.getElementById('demo');
console.log(element.textContent); // "Initial text content"
element.textContent = 'Updated text content';
console.log(element.textContent); // "Updated text content"
</script>
</body>
</html>
在这个基本示例中，我们首先获取一个 div 元素的文本内容并将其记录到控制台。然后我们更新文本内容并记录新值。
这展示了 textContent 在读取和写入文本内容方面的基本用法。该属性可与任何可以包含文本的 HTML 元素配合使用。
textContent 与 innerHTML 对比
此示例展示了 textContent 和 innerHTML 之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>textContent vs innerHTML</title>
</head>
<body>
<div id="container">
<p>Some text <span>with nested elements</span></p>
</div>
<script>
const container = document.getElementById('container');
console.log('textContent:', container.textContent);
console.log('innerHTML:', container.innerHTML);
container.textContent = '<strong>New text</strong>';
console.log('After textContent:', container.innerHTML);
</script>
</body>
</html>
在这里，我们比较了 textContent 和 innerHTML 处理内容的不同方式。textContent 返回所有文本，而 innerHTML 返回 HTML 标记。
当我们使用 textContent 设置内容时，HTML 标签被视为纯文本，不会被解析。这使得 textContent 对于用户输入更安全，因为它能防止 XSS 攻击。
带隐藏元素的 textContent
此示例演示了 textContent 如何处理隐藏的元素。
<!DOCTYPE html>
<html>
<head>
<title>textContent with Hidden Elements</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div id="content">
Visible text
<span class="hidden">Hidden text</span>
</div>
<script>
const content = document.getElementById('content');
console.log(content.textContent); // "Visible text Hidden text"
</script>
</body>
</html>
在此示例中，我们有一个包含可见和隐藏文本的 div。textContent 会检索所有文本内容，而不管其可见性如何。
此行为与 innerText 不同，后者仅返回可见文本。textContent 更一致，因为它始终返回 DOM 树中的所有文本内容。
清空元素内容
此示例展示了如何使用 textContent 来清空元素内容。
<!DOCTYPE html>
<html>
<head>
<title>Clearing Content</title>
</head>
<body>
<div id="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<button onclick="clearContent()">Clear Content</button>
<script>
function clearContent() {
const list = document.getElementById('list');
list.textContent = '';
}
</script>
</body>
</html>
这里我们有一个项目列表和一个按钮。点击时，按钮使用 textContent 清空列表容器内的所有内容。
将 textContent 设置为空字符串是删除元素所有子节点的一种有效方法。它比单独删除节点更快，并且比使用空字符串的 innerHTML 更安全。
性能注意事项
此示例演示了 textContent 的性能优势。
<!DOCTYPE html>
<html>
<head>
<title>Performance Test</title>
</head>
<body>
<div id="test">Initial content</div>
<button onclick="runTest()">Run Performance Test</button>
<div id="results"></div>
<script>
function runTest() {
const element = document.getElementById('test');
const results = document.getElementById('results');
const iterations = 10000;
// Test textContent
let start = performance.now();
for (let i = 0; i < iterations; i++) {
element.textContent = 'textContent ' + i;
}
let textContentTime = performance.now() - start;
// Test innerHTML
start = performance.now();
for (let i = 0; i < iterations; i++) {
element.innerHTML = 'innerHTML ' + i;
}
let innerHTMLTime = performance.now() - start;
results.innerHTML = `
<p>textContent: ${textContentTime.toFixed(2)}ms</p>
<p>innerHTML: ${innerHTMLTime.toFixed(2)}ms</p>
`;
}
</script>
</body>
</html>
此示例比较了在反复更新元素内容时 textContent 与 innerHTML 的性能。textContent 通常更快，因为它不解析 HTML。
当更新频繁或内容量较大时，性能差异会更加明显。对于简单的文本更新，应优先选择 textContent 以获得更好的性能。
来源
在本文中，我们探讨了 JavaScript 中的 textContent 属性。该属性对于 Web 开发中的安全高效的文本操作至关重要。
作者
列出 所有 JS DOM 教程。