document.getElementById() 返回 null 主因是脚本执行早于 DOM 加载，需确保在 DOM 构建完成后执行（如 script 置于 前或监听 DOMContentLoaded），并核对 ID 拼写、大小写及服务端是否重写 ID。
静态 document.getElementById() 拿不到动态渲染的内容，直接读源码会漏掉 JS 填充的数据——这是绝大多数人卡住的第一步。
为什么 document.querySelector() 返回 null 或空字符串
页面加载后，HTML 源码里可能根本没有目标元素，它们是 JS 执行完才插入 DOM 的。比如一个新闻标题用 fetch() 请求 JSON 后再拼到 里，此时用 document.getElementById('title').textContent 会得到空值，不是代码写错了，是时机不对。
- 检查是否在
<script></script>标签里执行得太早：放在里且没加defer，DOM 还没建好 - 确认目标元素是否真由 JS 动态生成：打开浏览器开发者工具 → Elements 面板，手动搜索该元素是否存在；如果存在，再切到 Network → XHR/Fetch，看对应数据接口是否返回了原始 JSON
- 别依赖“右键→查看网页源代码”，那只是初始 HTML，不是最终 DOM
用 fetch + JSON 解析替代硬扒 HTML
现代网站（如腾讯新闻、网易新闻）多数把正文、列表数据藏在独立 API 接口里，返回的是干净的 JSON，比解析 HTML 稳定得多。你不需要模拟点击或等动画，只要找到那个 URL 就行。
- 在 Network 面板刷新页面，筛选
XHR或Fetch，找响应类型为application/json的请求 - 点开预览（Preview）或响应（Response），确认字段名（如
data.list[0].title） - 用
fetch()直接调它，注意加请求头：headers: {'User-Agent': 'Mozilla/5.0'}，否则部分接口会 403 - 避免跨域限制：浏览器里直接
fetch受同源策略约束；若用于后端采集，用 Python 的requests更自由
需要操作 DOM？等元素真正出现再取
如果必须从渲染后的页面中读取（比如第三方组件、广告位、用户交互后展开的内容），就不能靠“一上来就查”，得监听真实存在时机。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
MutationObserver监听指定父容器内新增节点，比轮询setInterval更高效、更精准 - 简单场景可用
await new Promise(r => setTimeout(r, 1000))强制延时，但不推荐——网络快慢、设备性能都会影响稳定性 - 对单页应用（SPA），URL 改变后内容常异步加载，需监听
pushState或hashchange，再配合waitForSelector类逻辑（Playwright/Selenium 中才有原生支持） - 浏览器环境里无法用
page.wait_for_selector()这种 Playwright 方法，那是服务端控制浏览器的 API，前端 JS 没有等 DOM 的内置阻塞式语法
Python 侧怎么稳定拿动态内容
浏览器里 JS 渲染完再抓，和服务器上发个请求就完事，是两套逻辑。别指望用 requests.get() 直接拿到和 Chrome 里看到的一样的 HTML。
- 轻量需求：用
Playwright启动无头 Chromium，page.goto(url)→page.wait_for_selector('article')→page.content()，再交给BeautifulSoup解析 - 别用 Selenium 除非必须模拟登录或复杂交互——启动慢、内存高、维护成本明显更高
- 如果接口已知且无反爬，绕过浏览器直接
requests.get('https://xxx.com/api/list?sid=123')，解析 JSON，比渲染整页快 5–10 倍 - 注意 User-Agent 和 Referer：有些接口校验这两个 header，缺一不可，否则返回空数组或 403
真正的难点从来不在“怎么写代码”，而在“怎么确认数据到底从哪来”。Network 面板多刷几次，对比 Preview 和 Response，比翻十篇教程都管用。很多所谓“动态内容”，其实只是藏得深一点的 JSON 而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
