在使用JavaScript操作网页时，DOM元素访问是最基础也最容易出错的环节。不少初学者和有一定经验的开发者都会在获取节点时碰到意料之外的问题，轻则取不到值，重则脚本直接报错中断。
常见陷阱一：页面未加载完成就访问元素
浏览器解析HTML是从上到下的。如果把script放在<head>里，执行时下面的body还没解析，document.getElementById就会返回null。
// 错误示例：脚本在head中，此时#btn还不存在
var btn = document.getElementById('btn');
console.log(btn); // null
// 解决方案：等待DOM就绪
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('btn');
console.log(btn); // 正常拿到元素
});
常见陷阱二：选择器书写错误
使用querySelector时，id前要加#，class前要加.。很多人漏写符号，导致返回null。
- 用id选择要写 #id名
- 用class选择要写 .class名
- 标签选择直接写标签名如 div
// 错误：忘记加点号
var item = document.querySelector('list-item');
// 正确
var item = document.querySelector('.list-item');
常见陷阱三：动态内容未插入就访问
通过innerHTML或appendChild添加的元素，若代码顺序不对，可能在插入前就去查找，自然找不到。
var box = document.getElementById('box');
box.innerHTML = '<span id="tip">提示</span>';
// 此时可以访问，因为已经插入
var tip = document.getElementById('tip');
console.log(tip.textContent); // 提示
常见陷阱四：混淆DOM元素与函数调用
有些接口是函数，如getElementById()，不要写成标签形式。另外在描述代码时，提到的标签名如<input>需转义，避免被解析。
| 错误写法 | 正确写法 |
|---|---|
| input() | document.querySelector('input') |
实用建议
把脚本放到body底部，或统一监听DOMContentLoaded；访问前用if判断元素是否存在；多用console.log输出类型。这样能避开大部分DOM访问陷阱。
稳定的DOM访问来自对加载时机和选择器规则的清楚认识。
JavaScriptDOMDOM_access修改时间：2026-07-30 13:15:19