优先使用textcontent获取纯文本内容，它返回节点及子节点的纯文本并保留空白符；innerhtml返回子节点html字符串，outerhtml返回自身及子节点完整html；nodevalue仅适用于文本和注释节点。
在 JavaScript 中获取节点的文本内容和 HTML 结构，主要靠几个原生属性，用对了就能准确提取所需信息，避免常见误区（比如把 script 标签内容也读进来，或忽略换行空格）。
获取纯文本内容：textContent 和innerText
textContent 是最常用、最可靠的选择。它返回节点及其所有子节点的**纯文本内容**，包括不可见元素（如 script、style）里的文本，且保留原始空白符（如换行、缩进）。
innerText 则更“视觉化”——它只返回用户实际能看到的文本，会忽略 display: none 或 visibility: hidden 元素的内容，还会自动折叠连续空白符，并受 CSS 样式影响（例如换行行为）。它在某些旧版 IE 中行为不一致，兼容性略差。
推荐优先使用 textContent，除非你明确需要模拟用户视角的渲染结果。
获取 HTML 字符串：innerHTML
innerHTML 返回节点的**子节点的 HTML 字符串**（不含自身标签）。例如：<div><p>Hello</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div> 调用 div.innerHTML 得到 "<p>Hello</p>"。
注意：
- 它不包含当前节点自身的开始/结束标签；
- 如果节点是空的（如 <img>），返回空字符串；
- 修改 innerHTML 会触发重新解析和渲染，有 XSS 风险，不要直接插入不可信内容。
获取带自身标签的完整 HTML：outerHTML
outerHTML 返回节点**自身及其全部子节点的 HTML 字符串**。上面的例子中，div.outerHTML 会返回 "<div><p>Hello</p></div>"。
这个属性常用于复制整个元素结构，或临时保存/替换某段 DOM。
补充说明：nodeValue 和 textContent 的区别
nodeValue 只对**文本节点（Text Node）和注释节点（Comment Node）** 有效，对元素节点返回 null。而 textContent 是元素节点的属性，会递归收集所有后代文本节点的内容。
所以一般不用 nodeValue 来取元素内容，除非你已经明确拿到的是 Text 节点（比如通过 firstChild 获取后做了类型判断）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
