JavaScript操作DOM需先获取元素再执行操作，常用选择器包括getElementById、querySelector、querySelectorAll等，操作方式涵盖内容、属性、样式及结构控制，并需注意性能、兼容性与安全性。
JavaScript操作DOM元素的核心是先获取目标元素，再对它执行读取、修改、添加或删除等操作。选择器就是用来精准定位DOM节点的工具，掌握常用方法能大幅提升开发效率。
常用DOM选择器方法
现代浏览器支持多种原生选择器，推荐优先使用语义清晰、性能较好的方式：
-
document.getElementById(id)：通过唯一id获取单个元素，最快最直接，例如
document.getElementById('header') -
document.querySelector(selector)：返回匹配指定CSS选择器的第一个元素，支持类名、标签、属性、伪类等，例如
document.querySelector('.btn.active') -
document.querySelectorAll(selector)：返回所有匹配元素的静态NodeList（类似数组），例如
document.querySelectorAll('input[type="text"]') -
document.getElementsByClassName(name)：返回具有指定class的元素集合（HTMLCollection），注意返回值是实时集合，例如
document.getElementsByClassName('item') -
document.getElementsByTagName(name)：按标签名获取元素（HTMLCollection），例如
document.getElementsByTagName('div') - document.getElementsByName(name)：通过name属性值获取元素（常用于表单控件），返回HTMLCollection
操作DOM元素的常见方式
获取元素后，可进行内容、属性、样式、结构等方面的控制：
-
修改内容：用
element.textContent设置纯文本；element.innerHTML设置含HTML结构的内容（注意XSS风险） -
设置/获取属性：用
element.getAttribute('href')和element.setAttribute('disabled', '')；也可直接操作属性如el.id、el.className -
控制样式：修改内联样式用
element.style.color = 'red'；更推荐通过增删class来控制样式，例如element.classList.add('highlight') -
添加或删除元素：用
parent.appendChild(child)、parent.insertBefore(newEl, refEl)、element.remove()或parent.removeChild(el)
注意事项与建议
实际开发中要注意兼容性、性能和安全性：
立即学习“Java免费学习笔记（深入）”；
- 避免频繁操作
innerHTML，尤其是拼接大量HTML字符串，容易引发重排重绘；可考虑使用DocumentFragment批量插入 -
getElementsByClassName和getElementsByTagName返回的是实时集合，循环中删除元素可能跳过后续项，建议转为数组处理：Array.from(elements) - 使用
querySelector和querySelectorAll时，确保选择器语法合法，复杂选择器可能影响性能，简单场景优先用getElementById - 操作前务必检查元素是否存在，防止报错：
if (el) { el.style.display = 'none'; }
不复杂但容易忽略
