用 document.queryselector 定位关键区块比遍历更稳，因其通过语义化、属性组合及部分匹配选择器直接命中目标，规避深层嵌套、动态类名、shadow dom 隔离和异步加载导致的解析失效。
用 document.querySelector 定位关键区块比遍历更稳
大型网站 HTML 通常嵌套深、类名动态、结构不规范，硬靠 getElementsByTagName 或层层 childNodes 遍历容易断。优先用语义化选择器直接命中目标区域——比如正文内容常在 article、[role="main"] 或带 data-testid 的容器里。
实操建议：
- 先用浏览器开发者工具的「Select an element」框点选目标区域，看它最短且稳定的 CSS 路径（避免用
div:nth-child(3) > div > div > p这类脆弱路径） - 优先组合属性选择器：
document.querySelector('main[data-content="article"]')比document.querySelector('div.container > div:nth-child(2)')更抗 DOM 变动 - 动态类名（如
css-1abc23d）别硬记，改用部分匹配：document.querySelector('[class*="content-body"]')
遇到 Shadow DOM 必须用 shadowRoot 才能访问内部节点
现代大型站点（尤其用 Web Components 或 Angular/React 封装的模块）常把核心内容藏在 Shadow DOM 里。直接 querySelector 查不到，控制台也看不到 DOM 层级，但元素仍存在——只是被隔离了。
实操建议：
- 检查目标元素是否有
shadowRoot属性：el.shadowRoot !== null，有就说明进了影子树 - 逐层穿透：
el.shadowRoot.querySelector('.title')，不能跳过shadowRoot直接查 - 若为
closed类型 shadowRoot（el.shadowRoot === null却能看到渲染内容），基本无法 JS 访问，得换思路：监听mutationObserver看渲染后外层是否吐出数据，或改用 Puppeteer 等工具执行真实渲染
innerHTML 解析易丢事件和脚本，cloneNode(true) 更安全
想提取某块 HTML 字符串做二次处理？别直接读 element.innerHTML——它会剥离绑定的事件监听器、移除已执行的 <script></script> 标签、丢失某些属性（如 checked 状态）。对依赖交互状态的页面（如电商商品页的选中规格），结果会错。
实操建议：
- 需要保真复制时，用
element.cloneNode(true)得到完整节点副本，再用new XMLSerializer().serializeToString(cloned)转字符串 - 若只需文本内容，用
element.textContent更轻量，且自动过滤 script/style 标签 - 解析第三方 HTML 片段时，用
DOMParser替代innerHTML赋值：new DOMParser().parseFromString(htmlStr, 'text/html')，避免 XSS 风险和隐式执行
异步加载内容必须等 MutationObserver 或特定事件触发
大型网站普遍用懒加载、无限滚动、SPA 路由切换，初始 HTML 里根本没你要的内容。等 DOMContentLoaded 不够，甚至 window.load 也可能早于数据渲染完成。
实操建议：
- 监听目标容器变化：
new MutationObserver(cb).observe(targetEl, { childList: true, subtree: true })，比轮询setTimeout更精准 - 关注框架特有信号：React 应用可监听
__REACT_DEVTOOLS_GLOBAL_HOOK__是否就绪；Vue 项目留意vue-app元素出现后再查子节点 - 若目标由 AJAX 注入，抓包看请求 URL 和响应格式，直接调 API 比解析 DOM 更可靠（前提是接口未鉴权或可复现）
真正麻烦的不是结构多深，而是结构随时在变——动态类名、Shadow DOM 隔离、异步注入、服务端渲染与客户端水合的差异，都会让一次有效的解析逻辑下周失效。留心这些点，比追求“通用解析器”更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
