document.getelementbyid() 返回 null 的主因是：id 字符串误加 # 前缀、脚本执行时元素未加载（如 script 在 head 中）、id 含非法字符（如 . 或 :）、服务端模板重复生成 id，或大小写不匹配；data-test-id 可作为测试场景下更安全的替代方案，但需框架透传支持且不适用于锚点跳转。
直接用 id 定位最高效，但必须确保它全局唯一、大小写严格匹配、且元素已加载；data-test-id 是测试场景下更安全的替代方案，不参与样式或语义，但需框架透传支持。
document.getElementById() 为什么返回 null？
这不是浏览器出错，而是常见配置疏漏导致的静默失败：
-
id字符串带了#前缀——getElementById("header")正确，getElementById("#header")必定返回null - 脚本执行时目标元素尚未解析，比如
<script></script>放在里，而<div id="main"> 在 <code>底部 -
id值含非法字符（如.、:、[），浏览器虽能渲染，但getElementById()不识别，得改用querySelector('[id="user.email"]') - 服务端模板循环生成时意外重复
id，比如 Vuev-for中写id="item"，结果多个元素共用同一id，getElementById()只取第一个 - 命名必须带业务上下文，避免泛化：用
data-test-id="checkout-payment-submit"，别用data-test-id="submit" - React/Vue/Svelte 中，
data-test-id不会自动透传到真实 DOM——Vue 需显式写v-bind="$attrs"，React 函数组件要解构并展开...props - JS 中读取值要用
dataset.testId（驼峰转换），不是dataset["data-test-id"]，也不是getAttribute("data-test-id")（后者可行但绕路） - 不能和
id混用做锚点跳转：<a href="#my-id"></a>只认id，data-test-id对原生滚动无作用 - 必须显式设置
tabindex="0"，否则 Tab 键跳不过去，屏幕阅读器也感知不到可编辑性 - 值只接受
true、false或空字符串，contenteditable="on"或contenteditable="plaintext-only"是无效写法 - 若输入中文卡顿或符号无法上屏，检查子元素是否设置了
user-select: none或pointer-events: none - 拼写纠错下划线干扰 UI？补上
spellcheck="false"，这是常被跳过的配套项
data-test-id 能否代替 id 做 JS 定位？
可以，而且更推荐用于自动化测试和动态组件场景，但要注意它不是“开箱即用”：
contenteditable 元素怎么才能真正被键盘聚焦？
加了 contenteditable="true" 还是点不进去？大概率缺了这个组合：
真正难的不是写对某个属性，而是理解它们生效的上下文约束：id 的唯一性靠人工维护，data-test-id 的透传靠框架配置，contenteditable 的可用性依赖 tabindex 和 CSS 状态。这些细节不报错，但会在用户第一次尝试键盘操作或测试脚本运行时突然失效。
