JavaScript操作DOM的核心是先找元素再操作，优先用querySelector/All，ID/标签/类名有专用方法，注意活集合陷阱，内容用textContent/innerHTML，类名用classList，属性用dataset，插入用append/before/remove，批量操作防重排重绘。
用 JavaScript 操作 DOM 元素，核心是先“找到”元素，再“做事情”。高效的关键不在于写得多，而在于选对方法、避开陷阱。
优先用原生现代选择器：querySelector 和 querySelectorAll
这两个方法支持完整的 CSS 选择器语法，可读性强、灵活性高，浏览器兼容性已覆盖所有主流现代环境（IE9+）。
- querySelector 返回第一个匹配的元素（找不到返回 null）
- querySelectorAll 返回静态 NodeList（不是实时集合），适合遍历或转数组操作
例如：document.querySelector('#header .nav-item.active') 比拼接多个 getElementById + getElementsByClassName 更简洁可靠。
按场景选更轻量的方法：ID、标签、类名有专属捷径
如果目标明确、结构简单，用专用方法反而更快（引擎级优化，尤其在大量节点时）：
立即学习“Java免费学习笔记（深入）”；
- document.getElementById('id') —— 查找唯一 ID，最快，返回单个元素
-
document.getElementsByTagName('div') —— 返回 HTMLCollection（实时集合），注意要加
[0]取值 - document.getElementsByClassName('btn') —— 同样返回 HTMLCollection，类名含空格需拆开处理
⚠️ 注意：getElementsByClassName 和 getElementsByTagName 返回的是“活的集合”，循环中增删同类元素可能引发意外跳项，建议先转成数组：Array.from(elements) 或 [...elements]。
操作元素本身：增删改查，记住几个高频实用方法
找到元素后，常用操作集中在内容、属性、类名和结构上：
-
修改内容：
el.textContent = '纯文本'（安全防 XSS），el.innerHTML = '带标签'（注意注入风险） -
操作类名：用
el.classList.add('active')、.remove()、.toggle()、.contains()—— 比手动操作className字符串靠谱得多 -
设置属性：
el.setAttribute('data-id', '123')；获取属性优先用el.dataset.id（自动转驼峰）；布尔属性如disabled直接赋值el.disabled = true -
插入/移动节点：
parent.append(child)、el.before(another)、el.remove()—— 这些现代方法语义清晰，替代了老旧的appendChild+createElement套路
性能与可维护小提醒
DOM 操作本身较重，批量更新时尽量减少重排重绘：
- 频繁修改样式？先
el.style.cssText = 'color:red;font-size:14px;'，或切换 class 更稳妥 - 要插多个元素？用
DocumentFragment统一拼好再挂载，或用innerHTML一次性写入（确保内容可信） - 监听事件别忘了事件委托：
list.addEventListener('click', e => { if (e.target.matches('.item')) {...} })，避免给每个子项单独绑定
基本上就这些。选对选择器、用熟 classList 和 modern DOM API，代码会更稳也更短。
