HTML结构重构后DOM树在多引擎下不一致是常态，因Chrome、Firefox、Safari对省略标签、非法嵌套等容错策略不同，导致同一HTML解析出的DOM树结构差异，使document.querySelectorAll断言必然失败。
HTML结构重构后，DOM树在Chrome/Firefox/Safari中不一致是常态，不是bug；直接用document.querySelectorAll断言节点数量或层级，测试必然在某个引擎上失败。
为什么document.querySelectorAll在多引擎下不可靠
浏览器对省略标签、非法嵌套、自闭合写法的容错策略完全不同。比如一段含未闭合<p>的HTML：<div><p>text</div>，Chrome会补全</p>并挂进<div>，Safari可能丢弃后续节点，Firefox甚至拒绝插入。此时document.querySelectorAll('p').length在三者中返回值不同——结构测试断言立刻崩溃。
- 必须先跑
https://validator.w3.org/，修复所有“End tag implied”类警告 - 禁用自动闭合：显式写出
<tbody></tbody>、<tr></tr>，哪怕规范允许省略 - 语义标签如
<main>不能直接塞进<p>里，否则各引擎解析结果发散
用<template>做跨引擎结构快照比对
<template>是唯一绕过实时解析差异的原生机制：它不渲染、不执行脚本、不加载资源，只存原始字符串。把待测HTML写进<template>，再用content.cloneNode(true)获取纯净副本，就能在所有引擎中拿到完全一致的初始DOM树。
- 不要用
el.innerHTML = htmlStr注入，改用template.innerHTML = htmlStr→document.importNode(template.content, true) - 表格结构必须确保
<template>内已含<tbody></tbody>，JS逻辑只操作该节点 - 比对前调用
el.normalize()合并相邻文本节点，避免换行/空格处理差异导致textContent不一致
哪些DOM属性能安全断言，哪些绝对不能碰
结构测试只比对节点类型、属性、层级、文本内容，不读取任何layout相关属性。一旦访问offsetWidth、getBoundingClientRect()或clientHeight，就等于把样式计算和布局阶段的引擎差异引入了结构断言——这会让测试在Safari 14–15等版本上误报“结构异常”，而实际只是flex子项min-width计算有bug。
立即学习“前端免费学习笔记（深入）”；
- 可安全断言：
el.tagName、el.hasAttribute('id')、el.children.length、el.textContent.trim() - 禁止断言：
el.offsetWidth、el.clientHeight、el.getClientRects() - 若需验证样式生效，用
window.getComputedStyle(el).display，而不是依赖el.style.display = 'block'
重构后如何验证是否真“没动结构”
最简验证方式：在Chrome、Firefox、Safari中分别打开同一份HTML，打开开发者工具Elements面板，手动展开DOM树，对比根节点下一级子节点的tagName与顺序。肉眼可见不一致，说明重构引入了隐式解析风险——比如把<div class="header">换成<header>但没补display: block，旧版Android WebView会当它是inline，导致DOM节点虽存在，但渲染为空白。
- 重点检查
<header>、<nav>、<main>等语义标签是否被包裹在块级上下文中 - 用Lighthouse跑无障碍审计，若“
button没有role”类报错突增，大概率是语义替换后丢失了ARIA属性继承链 - 纯HTML可读性测试：关掉所有CSS和JS，看内容是否仍按逻辑顺序线性呈现
