应先检查 document.getElementById 返回值是否为 null 再操作，因未检查时调用 .innerHTML 或 .addEventListener 会抛 TypeError；ID 区分大小写且须唯一。
怎么用 document.getElementById 安全获取元素
直接调用 document.getElementById 但没检查返回值，是导致后续脚本报错最常见的原因——它在找不到元素时返回 null，而你接着调用 .innerHTML 或 .addEventListener 就会抛出 TypeError: Cannot read property 'xxx' of null。
实际做法要加一层存在性判断：
const el = document.getElementById('my-btn');
if (el) {
el.addEventListener('click', handleClick);
}
注意：ID 值必须严格匹配（区分大小写），且页面中不能有多个相同 ID——浏览器只返回第一个，但这是 HTML 结构错误，不是 JS 能修复的。
为什么 querySelector 比 getElementsByClassName 更实用
getElementsByClassName 返回的是 HTMLCollection，它是**实时集合**：DOM 变动后它自动更新，但没法用 forEach，也不能解构，容易在循环中因集合动态变化引发意外跳过或重复。
querySelector 和 querySelectorAll 返回的是静态 NodeList，支持遍历和现代数组方法：
document.querySelectorAll('.item').forEach(item => {
item.classList.add('processed');
});
更关键的是，querySelector 支持完整 CSS 选择器语法，比如 document.querySelector('form#login input[name="email"]')，一步到位，不用嵌套多层查找。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
修改 DOM 内容时，textContent 和 innerHTML 怎么选
核心区别在于是否解析 HTML 字符串：
-
textContent只当纯文本处理，自动转义所有标签字符（如<script>会显示为文字），适合展示用户输入、防 XSS -
innerHTML会解析并渲染 HTML，但若插入不可信内容（比如从 URL 参数或表单取的值），可能执行脚本或破坏结构
常见误用场景：把用户昵称直接塞进 innerHTML ——如果昵称是 "<img src="https://img.php.cn/" alt="js怎么操纵浏览器DOM对象">"，就触发了 XSS。此时必须用 textContent。
事件绑定别在循环里反复写 addEventListener
下面这段代码看着自然，实则危险：
const buttons = document.querySelectorAll('.action');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', () => {
console.log(i); // 总是输出 buttons.length
});
}
问题出在闭包和变量提升：循环结束时 i 已是终值，所有回调共享同一个 i。解决方法有二：
- 用
for...of或forEach，避免作用域污染 - 给事件监听器传参：用
button.dataset.id存标识，回调里读取
另外，如果按钮是动态添加的（比如 AJAX 加载后插入），应改用事件委托：document.addEventListener('click', e => { if (e.target.matches('.dynamic-btn')) {...} })，否则新按钮永远绑不上事件。
<head> 里运行时，DOM 根本还没加载完。document.getElementById 必然返回 null，这不是 API 问题，是执行顺序问题。要么把 script 放在 </body> 前，要么用 DOMContentLoaded 事件兜底。 
