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

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

立即学习“Java免费学习笔记（深入）”；

标签： css javascript java html node 浏览器 app ssl ai 重绘 red