JS操作DOM详解与实战技巧

本文深入解析了JavaScript操作DOM的五大关键实践：强调使用document.getElementById前必须检查null以避免TypeError，指出ID严格区分大小写且需唯一；对比querySelector与getElementsByClassName，说明前者返回静态NodeList、支持CSS选择器和现代遍历方法，更安全高效；详解textContent与innerHTML的核心区别——前者防XSS、纯文本渲染，后者解析HTML但风险高；警示循环中直接使用addEventListener导致闭包陷阱，并提供for...of、data属性传参及事件委托等可靠替代方案；最后点明DOM操作最易忽视的前提——执行时机，必须确保脚本在DOM加载完成后运行，否则所有查找都将失败。这些看似基础却高频踩坑的细节，正是写出健壮、安全、可维护前端代码的核心所在。

怎么用 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"]')，一步到位，不用嵌套多层查找。

修改 DOM 内容时，textContent 和 innerHTML 怎么选

核心区别在于是否解析 HTML 字符串：

• textContent 只当纯文本处理，自动转义所有标签字符（如