(textcontent) js中textContent、innerText和innerHTML的用法以及区别
textContent、innerText 和 innerHTML 是JavaScript中用于获取或设置HTML元素内容的三种常用属性。它们的主要区别在于对HTML标签的处理和样式的考虑。
textContent
- 用途: 获取或设置一个节点及其后代的文本内容。
- 特点:
- 无视样式，即它会获取所有元素的内容，包括 script 和 style 元素内的文本。
- 忽略HTML标签，只提取文本内容。
- 不触发重绘。
使用textContent
获取元素textContent：
let element = document.getElementById('myElement');
let content = element.textContent;设置元素textContent：
element.textContent = '新的内容';innerText
- 用途: 获取或设置元素内的“渲染”文本。
- 特点:
- 考虑样式，即只显示通过CSS或者不被CSS隐藏（display属性为none的不显示）的元素文本内容。
- 忽略隐藏元素的文本。
- 触发重绘。
使用innerText
获取元素innerText：
let element = document.getElementById('myElement');
let content = element.innerText;设置元素innerText：
element.innerText = '新的内容';innerHTML
- 用途: 获取或设置元素内的HTML内容。
- 特点:
- 获取HTML标签和文本内容。
- 可以用来插入新的HTML到文档中。
- 触发重绘。
使用innerHTML
获取元素innerHTML：
let element = document.getElementById('myElement');
let content = element.innerHTML;设置元素innerHTML：
element.innerHTML = '<span>新的内容</span>';注意事项
textContent通常比innerText快，因为它不考虑样式信息，不会触发重绘。innerText不会获取隐藏元素的文本，而textContent则会。innerHTML可以获取和设置元素的HTML结构，但是使用不当可能会导致跨站脚本（XSS）攻击，因此在设置内容时要非常小心，避免插入未经过滤或验证的用户内容。
根据你要完成的任务，选择最适合你需求的属性来获取或设置内容。如果你只是想获取或设置文本内容，通常使用 textContent 就足够了。如果需要处理样式并且跟文本显示相关，使用 innerText。如果你要操作的是HTML结构，那么 innerHTML 是合适的选择。记得对用户的输入进行适当的清理和验证，以避免安全隐患。
(tessdata) Java使用Tessdata做OCR图片文字识别的详细思路 Tesseract OCR在Java中的使用 全网首发(图文详解1)
(jsincludes) js数组高阶函数之includes()方法总结 JavaScript数组方法：includes() 全网首发(图文详解1)
