应使用 replaceWith(...childNodes) 替代 remove() 删除 span 标签但保留内容，因其能安全展开所有子节点；需谨慎筛选目标 span，避免误删语义关键元素，并注意性能优化。
直接用 remove() 会丢文字，别这么干
很多人一上来就写 document.querySelectorAll('span').forEach(el => el.remove())，结果发现所有文字全没了。因为 remove() 是连标签带内容一起扔掉，不是“只删标签”。如果你的 span 里只有纯文本（比如 hello），那文字就彻底消失；如果里面有子元素（比如 hi there），连 都被一并清除。
用 replaceWith(...childNodes) 安全展开子节点
真正保留内容的做法，是把 span 自己替换成它的全部子节点——相当于“拆包”，让子节点升一级。这个操作对纯文本、嵌套标签、混合内容都安全。
-
span.childNodes包含所有子节点：文本、、注释等，一个不落 - 用
span.replaceWith(...span.childNodes)可以原地展开，DOM 结构自然平级 - 注意不要用
span.parentNode.replaceChild(..., span)，容易因节点移动出错
示例：
document.querySelectorAll('span').forEach(span => {
span.replaceWith(...span.childNodes);
});
处理带特定属性的 span 时，XPath 或 querySelector 要写准
比如只删 style="color: red" 的 span，不能靠 span[style] 粗暴匹配——它会命中所有带 style 属性的，哪怕值是 "font-size:12px"。
- 精确匹配完整值：用
span[style="color: red"] - 匹配包含某段样式：得用
span[style*="color: red"]（但注意空格和单位差异） - 更稳的方式是遍历后用
getComputedStyle或正则判断span.getAttribute('style') - PHP 的
DOMDocument场景下，LIBXML_HTML_NOIMPLIED会导致结构错乱，建议不加该 flag，或手动从取内容
批量处理前先确认是否真要删所有 span
有些 span 是语义必需的：比如 屏幕阅读器提示、 前端逻辑锚点、内联数学公式或代码高亮容器。盲目删除可能破坏功能或可访问性。
- 先跑一遍
document.querySelectorAll('span').forEach(s => console.log(s.outerHTML))看实际内容 - 检查是否有
class、data-属性、事件监听器（getEventListeners(s)in Chrome DevTools） - 若只是清理样式残留，优先用 CSS
span { all: unset; }覆盖，而不是删 DOM
最易被忽略的一点：替换操作本身不触发重排，但大量 replaceWith 仍会引发多次 layout，页面卡顿明显时，建议用 DocumentFragment 批量重组后再插入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
