获取DOM元素是操作网页的基础，常用方法包括：通过ID用getElementById获取单个元素；通过类名、标签名或属性批量获取元素集合；使用querySelector和querySelectorAll配合CSS选择器实现灵活精准定位；还可通过document.forms、links、images等属性快速获取特定元素。建议优先使用querySelector系列，注意返回值类型差异。
在JavaScript中，获取DOM元素是操作网页内容的基础。只有先选中目标元素，才能对其进行样式修改、事件绑定或内容更新等操作。以下是几种常用且实用的获取DOM元素的方法与技巧。
通过ID获取元素（getElementById）
这是最常见也最高效的方式，适用于页面中具有唯一ID的元素。
使用 document.getElementById() 方法，传入元素的ID字符串即可返回对应元素对象。
示例：const element = document.getElementById('myId');
注意：ID在整个页面应保持唯一，否则可能无法准确获取目标元素。若找不到对应ID，返回 null。
立即学习“Java免费学习笔记（深入）”；
通过标签名、类名或属性获取元素
当需要操作多个相似元素时，可通过以下方法批量获取：
- getElementsByClassName：根据类名获取元素集合（HTMLCollection）
- getElementsByTagName：根据标签名称获取元素
- getElementsByName：根据 name 属性获取元素（常用于表单）
const items = document.getElementsByClassName('item');
这些方法返回的是动态集合，即当DOM结构变化时，集合内容会自动更新。若没有匹配元素，则返回空集合而非null。
使用CSS选择器灵活获取（querySelector 和 querySelectorAll）
现代开发中更推荐使用 querySelector 和 querySelectorAll，它们支持完整的CSS选择器语法，灵活性更强。
- querySelector：返回第一个匹配的元素，未找到则返回 null
- querySelectorAll：返回所有匹配元素的静态 NodeList
const header = document.querySelector('header');<br>const buttons = document.querySelectorAll('.btn.primary');
你可以使用复杂选择器，如 div:nth-child(2) > p[class*="desc"]，实现精准定位。
获取特定类型元素的技巧
针对常见场景，有一些便捷方式：
- 获取表单元素：
document.forms['formName']或document.getElementById('formId').elements - 获取链接：
document.links返回所有包含 href 属性的 a 标签 - 获取图片：
document.images获取所有 img 元素 - 父级或子级查找：
element.children、element.parentNode配合使用可缩小查找范围
结合事件委托时，常通过 e.target 动态获取触发事件的具体元素，提升性能。
基本上就这些。掌握这些方法后，可以根据实际需求选择最合适的方式来获取DOM元素。建议优先使用 querySelector 系列，语法简洁且功能强大。同时注意返回值类型差异，避免调用不存在的方法。
