JavaScript如何操作DOM元素_JavaScript选择器有哪些常用方法

幻影之瞳 2025-12-24 00:00:00 次阅读

JavaScript操作DOM需先获取元素再执行操作，常用选择器包括getElementById、querySelector、querySelectorAll等，操作方式涵盖内容、属性、样式及结构控制，并需注意性能、兼容性与安全性。

JavaScript操作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

获取元素后，可进行内容、属性、样式、结构等方面的控制：

修改内容：用 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'; }