用id属性定位最快但需确保唯一性、合法性和加载时机；queryselector更可靠因其支持css选择器、规避id重复陷阱且不敏感于大小写与特殊字符。
用 id 属性做唯一标识是最快、最直接的 DOM 定位方式，但前提是它真唯一——重复、非法字符、大小写混淆或提前执行，都会让 document.getElementById() 返回错误结果甚至 null。
为什么 getElementById 有时返回 null 或错元素
不是方法失效，而是 id 值本身已破坏规范：
-
id在整页（含 iframe）中不唯一：两个<div id="modal">，<code>getElementById("modal")只返回第一个，后续逻辑全偏移 -
id含非法字符：如id="user.name"或id="123btn"，虽 HTML5 允许解析，但 CSS 选择器#user.name会被拆成「id=user 且 class=name」，JS 查不到；getElementById("user.name")能取到，但样式和关联（如<label for="user.name"></label>）全失效 - 大小写混用：
id="Header"和getElementById("header")不匹配（HTML 中id不区分大小写，但部分旧环境或框架行为不一致） - 脚本执行早于 DOM 加载：在
里直接调用getElementById，元素还没解析到，必然null - 支持 CSS 选择器语法：
document.querySelector('[data-testid="save-btn"]')或document.querySelector('form#login input[name="email"]')，定位比靠 ID 更精准、更贴近真实结构 - 自动规避 ID 重复陷阱：即使页面有多个
id="submit"，querySelector("#submit")仍只取第一个，但你一眼就能意识到“ID 冲突了”，而getElementById静默返回第一个，问题更隐蔽 - 无需担心大小写或特殊字符：用属性选择器
[id="user-profile"]，哪怕 ID 含连字符或数字开头，也照常工作 - Vue/React 中：改用
:id="'delete-btn-' + item.id"或id={`delete-btn-${item.id}`} - 服务端渲染（如 PHP/Node.js 模板）：拼接稳定唯一标识，如
id="user-{{ user.id }}"、id="card-" - 纯 JS 动态创建：用
crypto.randomUUID()（现代浏览器）或时间戳+计数器生成临时 ID，避免冲突 - 别用
Math.random()直接拼 ID：短字符串碰撞概率不可忽视，尤其在高并发或长生命周期页面中 -
<input id="email" name="email">表面看没问题，但若模板循环生成多个同名name="email"，后端收到的是数组还是覆盖值，取决于 enctype 和框架处理逻辑 -
<label for="email"></label>必须对应id，不是name；写成for="email"却没元素带该id，焦点绑定就失效 - 自动化测试（如 Playwright）常用
getByLabel或getByRole，它们依赖正确的for/id关联，而非name
querySelector 比 getElementById 更稳的三个实际理由
多数场景下，document.querySelector() 不仅没变慢，反而更可靠：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
动态生成 ID 时必须加唯一前缀或后缀
模板循环、列表渲染、组件复用时，硬写死 id="delete" 是典型翻车点：
id 和 name 别混着用，尤其在表单里
id 是 DOM 定位锚点，name 是表单提交字段键名，二者语义完全不同：
真正难的不是写对一行 getElementById，而是确保整个页面所有 id 的生成逻辑、拼写习惯、大小写策略、生命周期管理都统一且可追溯——这点在多人协作或老项目迭代中，最容易被忽略。
