如何用JavaScript操作DOM元素_有哪些高效的选择器和方法？

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、标签、类名有专属捷径

如果目标明确、结构简单，用专用方法反而更快（引擎级优化，尤其在大量节点时）：

• 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，代码会更稳也更短。