getelementbyid 是根据 id 获取单个 dom 元素的方法，传入不带#的字符串id，返回元素对象或null；需确保dom加载完成、id唯一且符合命名规范，性能优于 queryselector。

getElementById 是 JavaScript 中最常用、最直接的 DOM 查询方法，专门用于根据元素的 id 属性获取单个 HTML 元素。

基本用法：传入字符串 ID 即可

语法很简单：document.getElementById("your-id")。注意 ID 值不带 # 符号（和 CSS 选择器不同），且区分大小写。

• 如果找到匹配元素，返回该 DOM 元素对象（如 <div id="box"> → 返回 <code><div> 元素） <li>如果没找到，返回 <code>null（不是 undefined），所以建议检查返回值再操作
• ID 在整个页面中必须唯一，否则浏览器只返回第一个匹配的元素（HTML 规范要求 ID 唯一，实际中重复会导致不可预期行为）

常见使用场景示例

比如页面中有：<button id="submitBtn">提交</button>


javascript-pro
专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发
下载
• 获取按钮并绑定点击事件：const btn = document.getElementById("submitBtn"); btn?.addEventListener("click", () => {...});
• 修改内容：document.getElementById("title").textContent = "新标题";
• 读取输入框值：const value = document.getElementById("username").value;

注意事项和易错点

这个方法看似简单，但几个细节容易出错：

• 脚本执行时机很重要：确保 DOM 已加载完成。放在 底部，或用 DOMContentLoaded 事件包裹
• ID 字符串不能含空格或特殊符号（如 my-id 合法，my id 不合法）；HTML 中 ID 值需符合规范（以字母开头，可含字母、数字、连字符、下划线等）
• 不要在 ID 前加 #，写成 getElementById("#header") 会查不到（这是 querySelector 的写法）
• 返回值是 Element 类型，不是数组 —— 即使页面有多个同名 ID（不推荐），也只返回第一个

与 querySelector 对比（简要）

虽然 document.querySelector("#myId") 也能实现类似效果，但 getElementById 更快、更语义明确、兼容性更好（支持所有浏览器，包括 IE6+）。除非需要统一用 CSS 选择器语法，否则优先用 getElementById。