document.getElementById查不到SVG内部元素，因SVG通过img或object加载时处于独立文档上下文；内联SVG或Shadow DOM中需分别用主文档或shadowRoot.getElementById访问。
document.getElementById 为什么查不到 SVG 内部元素
常见错误现象：document.getElementById("dot-55") 返回 null，但 SVG 里明明写了 <circle id="dot-55">。这不是性能问题，是访问路径错了。
根本原因：SVG 若通过 <img src="map.svg"> 或 <object data="map.svg"> 加载，其内容处于独立文档上下文，无法被主页面 document 直接索引。
- 必须确保 SVG 是内联的（即直接写在 HTML 中），
<svg><circle id="dot-55"></svg> - 若 SVG 在 Shadow DOM 中（比如自定义元素内部），得用
shadowRoot.getElementById("dot-55")，不是全局document - ID 必须全局唯一：两个
<svg>块里都写id="dot-55"，document.getElementById只返回第一个，且不报错
data-* 属性读写时为什么拿不到值
HTML 写了 data-user-id="123"，JS 却取不到 el.dataset.userId？这是命名映射规则和解析限制共同导致的。
关键点：浏览器自动把连字符转驼峰、首字母小写，且不支持非法 JS 标识符。
立即学习“前端免费学习笔记（深入）”；
-
data-user-id→dataset.userId（正确）；dataset.userid或dataset.Userid都无效 -
data-1st-place不能用dataset.1stPlace（语法错误），必须写dataset["1st-place"] -
data-user:name含冒号，会被浏览器静默忽略；data-count="0"取出来仍是字符串"0"，需手动Number(el.dataset.count)
id 和 class 在高频查找中的性能差异
在渲染 10 万个节点的拓扑图时，反复调用 document.getElementById("legend-title") 是安全的；但换成 document.querySelector(".legend-title") 就可能卡顿。
因为 id 是浏览器原生哈希索引，getElementById 是 O(1)；而 class 依赖 CSS 选择器引擎，需遍历匹配。
- 重复 ID 不报错，但
getElementById永远只返回第一个——Vue/React 列表中写id="item"循环 5 次，就注定只能拿到第一个 -
class支持多值但空格敏感：class="btn primary"和class="btn primary"（双空格）会解析出空字符串类名，导致classList.contains("primary")失败 - 修改类名优先用
el.classList.add("active")，避免el.className += " active"引入多余空格或覆盖
为什么动态插入的 id 会引发 DOM 劫持
用户提交的评论含 <img id="alert">，之后页面任意位置调用 alert() 就执行了恶意逻辑——这不是 XSS，是 DOM 劫持。
根源：带 id 或 name 的 HTML 元素在解析阶段自动挂载为 window 全局变量，且不可禁用。
- 服务端渲染时，对用户输入的
id值加前缀（如user_f8a2b），避开alert、location、document等敏感名 - 前端动态插入必须用
document.createElement()+setAttribute("id", userInput)，绝不用innerHTML拼接 - 若必须用
innerHTML，先正则剥离或替换所有id=、name=属性，改用data-id
真实项目里最容易被忽略的，是 ID 的“唯一性”完全靠人写对，浏览器不校验、框架不兜底、工具链不拦截。哪怕只漏掉一个 label[for] 没同步改，就可能让表单交互无声失效。
