document.getElementById 是根据 ID 获取唯一 DOM 元素的方法，传入字符串 ID，找到则返回元素对象，未找到则返回 null；需确保 ID 唯一、DOM 已加载、不加 # 号。

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

基本用法：传入字符串 ID，返回元素对象或 null

语法很简单：

• 写法：document.getElementById("myId")
• 参数必须是字符串，且严格匹配 HTML 中元素的 id 值（区分大小写）
• 如果找到对应元素，返回该 DOM 元素对象（如
  返回
  ）
• 如果没找到，**不报错，而是返回 null** —— 这点很重要，使用前建议判断

常见注意事项和易错点

实际开发中容易踩坑的地方：

• ID 必须全局唯一：HTML 规范要求同一页面中 id 不可重复。若多个元素用了相同 id，getElementById 只返回第一个匹配的元素（行为未定义，应避免）
• 脚本执行时机很关键：必须确保 DOM 已加载完成再调用。放在 <script></script> 标签末尾，或用 DOMContentLoaded 事件包裹，否则可能取到 null
• 不要加 # 号：CSS 选择器里写 #myId，但这里只传纯 ID 字符串，例如 "header"，不是 "#header"
• ID 中含特殊字符需转义（极少用）：如 ID 是 user-name 或 123start，浏览器通常支持，但为保险起见，建议 ID 使用字母开头、只含字母数字和下划线

简单示例：获取并操作元素

HTML 片段：


arcgis-js
提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。
下载
Hello World

JS 代码：

const msgEl = document.getElementById("message");
if (msgEl) {
  msgEl.textContent = "Updated!";
  msgEl.style.color = "blue";
}

这里先判断是否获取成功，再操作，避免因 null 导致运行时错误。

对比其他查询方式

它和其它方法的区别也很清晰：

• querySelector("#myId") 功能类似，但更通用（支持任意 CSS 选择器），性能略低一点
• getElementsByClassName 或 getElementsByTagName 返回的是类数组（HTMLCollection），不是单个元素
• querySelector 和 querySelectorAll 返回的是静态 NodeList，而 getElementById 返回的是真实元素对象，语义更明确、速度更快