获取DOM元素有多种方法：通过ID用getElementById()返回单个元素或null；2. 通过类名或标签名使用getElementsByClassName()和getElementsByTagName()返回动态集合；3. 使用querySelector()和querySelectorAll()支持CSS选择器，分别返回首个匹配元素和静态NodeList；4. 推荐优先使用querySelector系列因语法统一、灵活性高，注意性能优化与返回值类型差异。
在HTML5中，获取DOM元素是前端开发的基础操作。通过JavaScript可以轻松访问页面中的任意元素，进而实现动态交互。现代浏览器提供了多种方法来选择和操作DOM节点，结合CSS选择器的使用，让元素获取更加灵活高效。
通过ID获取元素
最直接的方式是使用getElementById()方法，它根据元素的id属性返回唯一匹配的DOM节点。
- 该方法返回一个对象，若找不到对应ID则返回
null - ID在页面中应保持唯一，否则行为不可预测
示例：
const element = document.getElementById('myId');
通过标签名或类名获取元素集合
当需要批量操作相同类型或样式的元素时，可使用以下方法：
立即学习“前端免费学习笔记（深入）”；
- getElementsByClassName()：按类名返回HTMLCollection
- getElementsByTagName()：按标签名称返回所有匹配元素
这些方法返回的是动态集合，即DOM结构变化时会自动更新。
示例：
const items = document.getElementsByClassName('item');
const divs = document.getElementsByTagName('div');
使用CSS选择器获取元素
HTML5引入了更强大的querySelector()和querySelectorAll()方法，支持完整的CSS选择器语法。
-
querySelector()返回第一个匹配的元素（无匹配则返回null） -
querySelectorAll()返回所有匹配元素的静态NodeList - 支持复杂选择器如
.class #id div > p:nth-child(2)
示例：
const firstBtn = document.querySelector('button.primary');
const allLinks = document.querySelectorAll('nav ul li a');
选择器使用的实用建议
虽然多种方式都能获取元素，但在实际开发中推荐优先使用querySelector系列：
- 语法统一，易于理解和维护
- 支持现代CSS3选择器，灵活性高
- NodeList可通过扩展运算符转为数组，便于使用数组方法
注意性能问题：频繁查询大量节点时，尽量缓存结果或缩小搜索范围。
基本上就这些常用方法。掌握它们能应对大多数DOM操作场景，关键是根据具体情况选择最合适的方式。不复杂但容易忽略细节，比如返回值类型和作用范围。熟练之后，操作页面元素就会非常自然。
