本文介绍如何在不破坏 HTML 标签结构的前提下，精准定位并替换 等容器内独立的纯文本节点（text nodes），使用 childNodes 结合 nodeType === Node.TEXT_NODE 实现安全、可控的文本处理。
本文介绍如何在不破坏 html 标签结构的前提下，精准定位并替换 `` 等容器内独立的纯文本节点（text nodes），使用 `childnodes` 结合 `nodetype === node.text_node` 实现安全、可控的文本处理。
在 DOM 操作中，开发者常误用 element.children 来遍历子内容，但需明确：children 仅返回元素节点（Element Nodes），会完全忽略文本、注释、CDATA 等非元素节点。因此，像 文本链接更多文本 中的 "文本" 和 "更多文本" 这类直接嵌入在标签间的纯文本，无法通过 children 获取——这正是问题的核心症结。
要完整访问包括纯文本在内的所有直接子内容，必须使用 element.childNodes。它返回一个 NodeList，包含所有类型的子节点：元素节点（
、）、文本节点（Text Nodes）、注释节点等。其中，纯文本节点的 nodeType 值恒为 Node.TEXT_NODE（即 3），这是识别和筛选它们的关键标识。
以下是一个可直接运行的示例代码，演示如何安全地查找、匹配并替换目标纯文本，同时严格保留原有 HTML 结构：
const span = document.querySelector('span');
for (const node of span.childNodes) {
// 仅处理纯文本节点（排除空格、换行等空白文本节点可选优化）
if (node.nodeType === Node.TEXT_NODE) {
const originalText = node.textContent;
// 使用正则或字符串方法进行精准替换（支持全局、区分大小写等）
const updatedText = originalText.replace(/target text/g, 'new text');
// 直接修改文本内容，DOM 自动更新，不影响邻近元素节点
node.textContent = updatedText;
}
}
// 验证结果：innerHTML 保持标签完整，仅文本被替换
console.log(span.innerHTML.trim());
// 输出：
// <p>Ignore text</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
// new text 1
// <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196" alt="如何遍历并替换 HTML 元素中的纯文本节点（保留标签结构）" >
// new text 2✅ 关键注意事项：
- childNodes 包含空白文本节点（如换行符 \n、缩进空格），若需跳过纯空白内容，可在判断后追加 originalText.trim() !== '' 检查；
- textContent 是读写安全的属性，修改它不会触发 HTML 解析，避免 XSS 风险，也绝不会破坏现有 DOM 结构；
- 切勿使用 innerHTML 替换整个 span 内容——这将销毁事件监听器、表单状态及动态生成的节点；
- 若需更复杂的文本定位（如仅替换特定父元素下的文本），可结合 node.parentNode 进行上下文校验。
综上，childNodes + nodeType 是处理混合内容（HTML 标签 + 纯文本）场景的标准且健壮方案。掌握这一模式，即可在富文本编辑、内容本地化、敏感词过滤等实际业务中，实现「保结构、精替换」的 DOM 文本操作目标。
