getelementbyid 返回 null 主因是执行时机过早、dom 未加载完；其次为 id 大小写错误或含非法字符；获取后 innerhtml 解析 html 有 xss 风险，textcontent 仅渲染纯文本更安全。
getElementById 返回 null 的常见原因
直接调用 document.getElementById('xxx') 却拿到 null，基本不是语法写错，而是执行时机不对——DOM 还没加载完。浏览器解析 HTML 是从上到下流式进行的，如果脚本写在 里或靠前位置，此时 <div id="xxx"> 根本还没被解析进 DOM 树。
<p>解决方式只有两个可靠选择：</p>
<ul>
<li>把 <code><script></script> 标签移到 前（最简单、兼容性最好）
DOMContentLoaded 事件包裹获取逻辑（适合必须放 别依赖 window.onload——它等所有资源（图片、CSS）加载完才触发，比 DOM 就绪晚得多。
id 值大小写和特殊字符的坑
getElementById 是严格区分大小写的，且对 id 值有隐含限制：HTML 规范要求 id 必须以字母开头，后续可跟字母、数字、连字符（-）、下划线（_）、冒号（:）或点（.）。但冒号和点在 CSS 选择器里有特殊含义，JS 虽能识别，却极易引发混淆。
比如：<div id="user:name">，你写 <code>document.getElementById('user:name') 能取到，但若后续想用 querySelector('#user:name') 就会失败（需写成 querySelector('#user\:name')）。所以建议：
- id 全部小写
- 只用字母、数字、短横线（
-）和下划线（_） - 避免以数字开头（如
1item合法但易出错，改用item-1）
获取到元素后，读写 innerHTML 和 textContent 的区别
拿到元素引用后，常要操作内容。这里关键区别在于：
-
element.innerHTML解析并渲染 HTML 字符串，适合插入带标签的内容，但有 XSS 风险（用户输入不能直接塞进去） -
element.textContent纯文本，不解析标签，安全且快，适合展示用户数据
例如：el.innerHTML = '<strong>hello</strong>' 会让文字加粗；而 el.textContent = '<strong>hello</strong>' 会原样显示那串字符。
注意：textContent 会清空子节点并替换为纯文本节点，而 innerHTML 是重新解析字符串生成新 DOM 结构——性能和副作用都不同。
替代方案：什么时候不该用 getElementById
当你要找的不是唯一元素，或 id 是动态生成、不可控时，getElementById 就不适用了。典型场景：
- 一组同类按钮（如多个
class="delete-btn"），该用document.querySelectorAll('.delete-btn') - 根据数据属性筛选（如
data-status="pending"），用document.querySelector('[data-status="pending"]') - 父容器内找子元素（避免全局污染），用
parentEl.querySelector('.child')，而非先查父再查 id
ID 在整个页面必须唯一，这是硬约束。强行复用 id 不仅让 getElementById 行为不可预测（通常只返回第一个匹配），还会破坏可访问性（如 label for="xxx" 失效）和 SEO。
