应使用 parse5 解析 HTML 片段并遍历 AST 判断标签是否存在，因其保留原始 token、避免自动修复；DOMParser 会修正结构导致误判，正则则因 HTML 复杂性不可靠。
用 DOMParser 判断节点是否存在，但要注意它不反映原始结构
DOMParser 解析 HTML 字符串后返回的是“修复后”的 DOM 树，document.getElementById 或 querySelector 在其结果上查不到节点，不等于原始 HTML 里没写——比如你漏写了 </div>，DOMParser 会自动补全，导致你以为元素存在，其实源码已错乱。
真正想确认“源码中是否写了某个标签”，不能依赖 DOMParser 的解析结果，得用能保留 token 流的解析器，比如 parse5：
-
parse5.parseFragment(html)返回 AST，可遍历所有element节点，检查tagName是否匹配目标（注意：它标准化为小写，需配合treeAdapters提取原始书写形式） - 若只查是否存在
<script>或<meta>这类关键标签，建议直接正则扫描原始字符串——但仅限你完全控制输入格式，且不含换行、属性跨行、HTML 实体等复杂情况 -
DOMParser适合做轻量预览或结构验证，不适合做代码质量检测；它返回的document对象支持querySelector，但查到的节点位置和层级可能与原始文本严重不符
在服务端 Node.js 环境中用 parse5 安全判断标签存在性
parse5 是目前最符合 HTML5 规范的解析器，能暴露原始 token，避免浏览器式“自动修复”带来的误判。
安装后可这样写：
立即学习“前端免费学习笔记（深入）”；
const parse5 = require('parse5');
const ast = parse5.parseFragment('<div id="main"><p>hello</p></div>');
<p>function hasTag(node, target) {
if (node.tagName === target.toLowerCase()) return true;
if (node.children) {
return node.children.some(child => hasTag(child, target));
}
return false;
}</p><p>console.log(hasTag(ast, 'DIV')); // true
注意几点：
-
parse5.parse()用于完整文档，会自动注入<html><body>，干扰“缺失<head>”类判断；片段用parseFragment -
node.tagName是标准化后的名称，无法区分<Div>和<div>；要检查书写规范，必须用parse5.treeAdapters.default.getTagName(node)获取原始值 - 不推荐用
jsdom做存在性判断——启动慢、内存高，且默认行为更接近浏览器，反而掩盖语法问题
为什么不用正则匹配 HTML 标签来判断存在性
正则在绝大多数真实 HTML 场景下不可靠，不是“写得不够好”，而是根本能力边界问题。
以下情况会让正则失效：
- 标签跨多行：
<input type="text" id="user-name" /> - 属性值含
<或>：如data-html="<b>test</b>" - 注释或 CDATA 中出现疑似标签：
<!-- <div> --> - 自闭合标签写法混用：
<img/>vs<img />vs<img>
如果你只是处理模板生成的、无嵌套、无用户输入的极简 HTML（比如构建时生成的 SVG 片段），且已加守卫防止上述情况，那 new RegExp('<' + tag + '\b', 'i') 可临时应急。否则，一律交给 parse5 或浏览器原生 DOM API。
动态渲染页面中，DOMParser 和真实 DOM 的判断结果为何不一致
因为两者作用对象完全不同：DOMParser 处理静态字符串，真实 DOM 是运行时内存树，中间隔着 JS 执行、框架挂载、v-if 条件移除、Shadow DOM 隔离等多层逻辑。
例如 Vue 模板里写了 <button v-if="showBtn">，但 showBtn 为 false 时，该按钮节点根本不会出现在真实 DOM 中；而你把模板字符串丢给 DOMParser，它只会看到原始文本里的 <button>，并成功解析出来。
所以：
- 查“源码是否包含某标签” → 用
parse5或字符串扫描 - 查“当前页面是否渲染出该元素” → 用
document.querySelector或框架提供的 ref/API（如ref.current） - 查“Shadow DOM 内部是否存在” → 必须先拿到
shadowRoot，再调用其querySelector，DOMParser 完全无能为力
最容易被忽略的是上下文切换：你以为在查页面，其实代码跑在字符串解析阶段；你以为在分析源码，结果调试时看的是 Elements 面板里已被框架重写的 DOM。
