textcontent 属性用于获取或设置节点及其后代的文本内容，忽略 html 标签。1. 获取内容：element.textcontent；2. 设置内容：element.textcontent = "新内容"。textcontent 与 innertext 区别在于其不考虑 css 样式，且为 w3c 标准；与 innerhtml 区别在于其不解析 html 标签，更安全。避免 xss 的方法是优先使用 textcontent，对用户输入进行验证和 html 编码。高效使用方式包括一次性设置、使用 documentfragment 和模板引擎。兼容性方面，现代浏览器均支持 textcontent，旧版 ie 可用 innertext 替代。
textContent 属性，简单来说，就是用来获取或设置一个节点及其后代的文本内容。它会把所有子节点的文本内容连接起来，忽略 HTML 标签。
textContent 属性在处理文本内容时非常有用，尤其是在需要提取纯文本或者避免 XSS 攻击的场景下。
如何使用 textContent 获取和设置文本内容？
textContent 的用法非常简单。获取文本内容：element.textContent；设置文本内容：element.textContent = "新的文本内容"。它会返回或替换节点及其后代的所有文本内容。
举个例子：
这是一段文字。
这是另一段文字。
可以看到，textContent 直接把 div 里面的所有文本内容提取了出来，并且在设置的时候，直接替换了所有内容，包括 HTML 标签也被忽略了。
textContent 与 innerText、innerHTML 的区别？
textContent、innerText 和 innerHTML 都是用来处理元素内容的，但它们之间有明显的区别：
- textContent: 获取或设置节点及其后代的文本内容，忽略 HTML 标签。
- innerText: 获取或设置节点及其后代的“渲染”文本内容。它会考虑 CSS 样式，并且不是 W3C 标准，在不同浏览器中行为可能不一致。
- innerHTML: 获取或设置节点的 HTML 内容，包括 HTML 标签。使用 innerHTML 有可能导致 XSS 攻击，因为它会执行 HTML 中的脚本。
简单来说，textContent 更安全，innerText 考虑渲染效果，innerHTML 可以操作 HTML 结构。选择哪个取决于你的具体需求。我个人更倾向于使用 textContent，因为它更安全，行为更可预测。
一组效果非常酷的鼠标滑过按钮背景动画特效。该特效中，当鼠标滑过按钮时，使用CSS3 animation来动画backgroundsize和backgroundposition属性，来制作各种背景动画效果。
如何避免 textContent 导致的 XSS 攻击？
textContent 本身就是一种避免 XSS 攻击的方式。因为 textContent 会将所有内容都视为文本，不会执行 HTML 标签。但是，如果你从用户输入中获取数据，并将其直接赋值给 textContent，仍然需要小心。
例如，如果用户输入 ，textContent 会将其视为纯文本，不会执行脚本。但如果你的代码逻辑中，先将用户输入赋值给 innerHTML，然后再获取 textContent，那么就可能存在 XSS 风险。
所以，最佳实践是：
- 始终对用户输入进行验证和过滤。
- 尽量使用 textContent 来设置文本内容，避免使用 innerHTML。
- 如果必须使用 innerHTML，确保对输入进行 HTML 编码，防止恶意脚本执行。
如何在 JavaScript 中高效地使用 textContent？
textContent 的性能相对较好，但在大型 DOM 操作中，仍然需要注意效率。以下是一些建议：
- 避免频繁访问 textContent: 尽量一次性获取或设置 textContent，而不是在循环中频繁操作。可以将需要设置的文本内容拼接好，然后一次性赋值给 textContent。
- 使用 DocumentFragment: 如果需要创建大量的 DOM 节点，可以使用 DocumentFragment 来提高性能。DocumentFragment 是一个轻量级的文档对象，可以用来存储 DOM 节点，然后一次性添加到 DOM 树中。
- 考虑使用模板引擎: 对于复杂的文本内容生成，可以考虑使用模板引擎，例如 Handlebars、Mustache 等。模板引擎可以更方便地生成 HTML 代码，并且通常会进行优化，提高性能。
textContent 在不同浏览器中的兼容性如何？
textContent 属性在现代浏览器中都得到了很好的支持，包括 Chrome、Firefox、Safari、Edge 等。但是，在一些旧版本的浏览器中，可能存在兼容性问题。
例如，在 IE8 及更早的版本中，textContent 属性被称为 innerText。为了兼容这些旧版本浏览器，可以使用以下代码：
function setTextContent(element, text) {
if (element.textContent !== undefined) {
element.textContent = text;
} else {
element.innerText = text;
}
}
const myDiv = document.getElementById('myDiv');
setTextContent(myDiv, "新的文本内容");这段代码会先检查浏览器是否支持 textContent 属性，如果支持，就使用 textContent，否则使用 innerText。这样可以确保代码在不同浏览器中都能正常运行。
总的来说，textContent 是一个非常实用的属性，可以方便地获取和设置节点的文本内容。在使用时，需要注意安全性和性能问题，并根据实际情况选择合适的用法。
