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 里连 都没有
• 用了 IntersectionObserver 或分页懒加载，只渲染可视区几行，其他 根本没创建

  解决思路不是“等 DOM 出来再查”，而是定位数据源头：看 Network 面板找那个返回真实数据的 API 请求（通常是 JSON 接口），直接用它，别碰 HTML。

  非得从渲染后 DOM 提取？用 MutationObserver 监听节点插入

  如果必须从最终渲染的 DOM 中提取（比如第三方页面、无法改后端），不要轮询 document.querySelector，用 MutationObserver 等真实节点出现：

  • 监听 tbody 或表格容器的 childList 变化，而不是隔 100ms 查一次
  • 观察到新 插入后，立即用 textContent.trim() 提取，避开 innerText 的空白合并问题
  • 加个超时兜底（比如 5s 后强制停止），防止无限等待

  示例关键片段：

  
  Expanso yaml-to-json
  使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。
  下载

  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 存在 里，但你只取 td 文本，就丢了主键。

  正确做法是：对每行 先读 el.getAttribute('data-user-id')，再遍历 cells 提文本，最后合成对象。字段名别硬编码，用 Array.from(table.querySelectorAll('th')).map(th => th.textContent.trim()) 动态取，避免列顺序变更导致错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！