HTML动态内容不在源码中，需通过API获取或MutationObserver监听DOM变化提取；Python端应使用Playwright/Selenium执行JS，注意抓取data属性和动态表头。
HTML动态内容不能直接转JSON——因为所谓“动态内容”根本不在 HTML 源码里，它由 JavaScript 运行时注入，document.innerHTML 或服务端返回的原始 HTML 字符串里压根没有这部分。
为什么 document.querySelectorAll('table tr') 有时拿不到数据
常见错误现象：你写好 JS 脚本，在控制台跑 document.querySelectorAll('table tr')，结果返回空数组或只有表头；但页面明明显示了几十行数据。
- 页面用 Vue/React 渲染，
table是组件 mount 后才生成的，脚本执行太早，DOM 还没更新 - 数据通过
fetch异步加载，表格是后续innerHTML = ...拼出来的，源 HTML 里连<tbody> 都没有 <li>用了 <code>IntersectionObserver或分页懒加载，只渲染可视区几行，其他<tr> 根本没创建 <p>解决思路不是“等 DOM 出来再查”，而是定位数据源头：看 Network 面板找那个返回真实数据的 API 请求（通常是 JSON 接口），直接用它，别碰 HTML。</p> <h3>非得从渲染后 DOM 提取？用 MutationObserver 监听节点插入</h3> <p>如果必须从最终渲染的 DOM 中提取（比如第三方页面、无法改后端），不要轮询 <code>document.querySelector，用MutationObserver等真实节点出现：立即学习“前端免费学习笔记（深入）”；
- 监听
tbody或表格容器的childList变化，而不是隔 100ms 查一次 - 观察到新
<tr> 插入后，立即用 <code>textContent.trim()提取，避开innerText的空白合并问题 - 加个超时兜底（比如 5s 后强制停止），防止无限等待
示例关键片段：
const observer = new MutationObserver(() => { const rows = document.querySelectorAll('table tbody tr'); if (rows.length > 0) { const json = Array.from(rows).map(row => { const cells = row.querySelectorAll('td, th'); return Array.from(cells).map(c => c.textContent.trim()); }); console.log(JSON.stringify(json)); observer.disconnect(); } }); observer.observe(document.querySelector('table'), { childList: true, subtree: true });Python 端处理动态页面：别用 requests，上 Playwright 或 Selenium
用
requests.get(url)拿到的永远是初始 HTML，JS 渲染的内容为零。这时候：-
Playwright比Selenium更轻、启动更快，支持等待选择器出现：page.wait_for_selector("table tbody tr", state="visible") - 拿到完整 DOM 后，再用
BeautifulSoup或原生page.content()+ 正则（仅限简单结构）提取 - 若目标是表格，优先调用
page.eval_on_selector_all("table tr", "els => els.map(el => [...el.cells].map(c => c.textContent.trim()))")，绕过 Python 解析开销
注意：Playwright 默认不执行 JS 的 headless 模式会漏数据，必须确认
java_script_enabled=True（默认开启，但检查下配置）。最容易被忽略的一点：动态内容常带属性态数据，别只抓 textContent
很多前端框架会在 DOM 节点上挂
data-id、data-status这类元信息，而textContent完全丢掉这些。例如一行用户数据，真实 ID 存在<tr data-user-id="123"> 里，但你只取 <code>td文本，就丢了主键。正确做法是：对每行
<tr> 先读 <code>el.getAttribute('data-user-id')，再遍历cells提文本，最后合成对象。字段名别硬编码，用Array.from(table.querySelectorAll('th')).map(th => th.textContent.trim())动态取，避免列顺序变更导致错位。 - 监听
