getElementById 是根据 ID 获取单个 DOM 元素的方法，传入不带#的字符串ID，返回元素对象或null；需确保DOM加载完成、ID唯一且符合命名规范，性能优于 querySelector。
getElementById 是 JavaScript 中最常用、最直接的 DOM 查询方法，专门用于根据元素的 id 属性获取单个 HTML 元素。
基本用法：传入字符串 ID 即可
语法很简单：document.getElementById("your-id")。注意 ID 值不带 # 符号（和 CSS 选择器不同），且区分大小写。
- 如果找到匹配元素，返回该 DOM 元素对象（如
<div id="box">→ 返回<div>元素） - 如果没找到，返回
null（不是undefined），所以建议检查返回值再操作 - ID 在整个页面中必须唯一，否则浏览器只返回第一个匹配的元素（HTML 规范要求 ID 唯一，实际中重复会导致不可预期行为）
常见使用场景示例
比如页面中有：<button id="submitBtn">提交</button>
- 获取按钮并绑定点击事件：
const btn = document.getElementById("submitBtn"); btn?.addEventListener("click", () => {...}); - 修改内容：
document.getElementById("title").textContent = "新标题"; - 读取输入框值：
const value = document.getElementById("username").value;
注意事项和易错点
这个方法看似简单，但几个细节容易出错：
立即学习“Java免费学习笔记（深入）”；
- 脚本执行时机很重要：确保 DOM 已加载完成。放在
<body>底部，或用DOMContentLoaded事件包裹 - ID 字符串不能含空格或特殊符号（如
my-id合法，my id不合法）；HTML 中 ID 值需符合规范（以字母开头，可含字母、数字、连字符、下划线等） - 不要在 ID 前加
#，写成getElementById("#header")会查不到（这是querySelector的写法） - 返回值是
Element类型，不是数组 —— 即使页面有多个同名 ID（不推荐），也只返回第一个
与 querySelector 对比（简要）
虽然 document.querySelector("#myId") 也能实现类似效果，但 getElementById 更快、更语义明确、兼容性更好（支持所有浏览器，包括 IE6+）。除非需要统一用 CSS 选择器语法，否则优先用 getElementById。
