高榕资本打开控制台看到一长串报错，里面夹着 log.js:72 [echarts] can't get dom width or height. please check dom.clientWidth / clientHeight 的时候，很多人的第一反应是：ECharts 是不是没加载成功？版本是不是有问题？然后开始换 CDN、清缓存、查网络。但我可以负责任地说，这个报错绝大多数情况下根本不是库的问题，而是 DOM 访问出了问题。你在图表初始化的时候，容器没有拿到有效的宽度或高度，ECharts 连自己的画布都撑不开，自然只能打一行日志拒绝干活。
这里说的“DOM 访问”，并不只是 document.getElementById 这么简单。它决定了你写的代码会不会突然冒出 Cannot read properties of null，也决定了动态渲染出来的数据能不能稳定显示，更决定了你从 URL、接口、用户输入里拿到的内容放到页面后会不会变成安全隐患。无论你是刚写前端的小白，还是维护过几个后台系统的老手，把 DOM 访问这套逻辑捋清楚，再回头看那些奇奇怪怪的线上问题，多半会很通透。
这篇文章会从 DOM 访问的底层直觉讲起，聊清楚访问时机、选择器 API、布局尺寸、动态渲染和数据安全这些事。核心会围绕几个非常常见的场景展开：ECharts 的容器尺寸报错、AJAX 拿到 JSON 之后怎么把数据写进页面、还有什么是 DOM 型 XSS。全部代码都能直接在浏览器控制台里验证，不需要额外装任何环境。
1. 按“访问”的思路重新看 DOM 操作
1.1 访问一个 DOM 元素，本质上是在树里找一条路径
平时写 const btn = document.getElementById('saveBtn')，看起来只是一句获取元素的代码，但背后其实发生了很多步：浏览器把 HTML 解析成一棵节点树，然后从 document 根节点出发，按 id、标签、属性或选择器一路走到目标节点，最后把那个真实的节点对象交到变量里。
很多人会把“HTML 字符串”和“DOM 节点”混在一起。HTML 字符串只是源代码，DOM 节点是浏览器解析后生成的。你访问到的节点是可以直接修改属性、绑定事件、读取布局数据的活对象。这个区别很重要，因为一旦你通过 innerHTML 把整块内容替换掉，旧的节点对象并不会变成 null，它仍然存在，只是已经脱离了文档树。这种事我见过太多次了：开发者在页面初始化时缓存了一个 container 变量，后来又用 container.innerHTML = ... 整体刷新，再往后往这个旧容器里追加子节点，页面怎么都不更新，最后发现往一个已经不连在 DOM 树里的孤儿节点上写东西，浏览器当然不会画给你看。
整个访问过程可以分成三件事：找路径、取节点、保持引用。找路径要面对 css 选择器的匹配规则；取节点要区分单个元素和元素集合；保持引用则要关注节点什么时候从文档里被摘掉。理解了这些，你再看 document.querySelector 以后的操作，就会意识到它不是一行“取到就好”的代码，而是整条操作链的入口。
1.2 三个现实原因，让访问不会每次成功
第一个原因是时机。最经典的场景是在 head 里写 <script>，脚本一执行就去访问 body 里的 div，此时解析器还没走到那段结构，document.getElementById 只会拿到 null。有人把它改成 window.onload，有人加 defer，也有人把脚本挪到 body 底部。这些做法本质都一样：保证 DOM 树已经构建到了你要访问的节点。现在很多框架都是异步渲染，数据没回来之前，页面里对应区域还是空壳，你太早去访问，同样拿不到目标元素。
第二个原因是结构上下文。元素不一定都躺在同一条文档树里，它可能在 iframe 内部，可能在 Shadow DOM 里，也可能只是一段模板字符串还没被解析成节点。如果你直接用 document.querySelector 去查一个藏在 iframe 里的节点，肯定找不到。要是你同时在处理多个窗口或多标签页，还得确认访问的是哪个 document，否则就像在 A 仓库里找 B 仓库的货架，方向压根不对。
第三个原因是布局状态。就算你成功拿到了节点，也不代表它的宽度、高度、坐标已经可读。容器在折叠面板里隐藏着、父级没有设置高度导致子容器 height: 100% 落空、动画刚开始元素仍在 display: none 状态，这些都会让 clientWidth、clientHeight 拿到 0。DOM 节点存在只是第一步，节点有没有参与浏览器布局，是另一件必须确认的事。把结构访问和布局访问混为一谈，是很多“元素明明在啊，为什么尺寸读不出来”问题的根源。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 高频访问姿势与边界
2.1 选择器 API 怎么搭配合适
访问单个元素，最常用的是 getElementById 和 querySelector。性能上在老项目里 getElementById 通常更快一些，因为它能直接通过 id 索引定位；querySelector 灵活，但需要在内部解析选择器。日常业务中两者差距其实感知不到。我的习惯是：按 id 拿元素用 getElementById，按 class 或嵌套层级拿元素用 `querySelector