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)
注意事项与建议
实际开发中要注意兼容性、性能和安全性：
- 避免频繁操作
innerHTML，尤其是拼接大量 HTML 字符串，容易引发重排 重绘；可考虑使用DocumentFragment批量插入 -
getElementsByClassName和getElementsByTagName返回的是实时集合，循环中删除元素可能跳过后续项，建议转为数组处理：Array.from(elements) - 使用
querySelector和querySelectorAll时，确保选择器语法合法，复杂选择器可能影响性能，简单场景优先用getElementById - 操作前务必检查元素是否存在，防止报错：
if (el) {el.style.display = 'none';}
不复杂但容易忽略
