JavaScript 中获取页面元素是一项基础且至关重要的技能，它允许开发者操作 DOM（文档对象模型），进而动态地修改页面内容和样式。以下是几种常用的方法来获取页面元素：
1. 通过ID获取元素
使用 `document.getElementById()` 方法可以获取带有特定ID的元素。由于ID在页面中是唯一的，因此这个方法总是返回单个元素。
var element = document.getElementById('elementID');
如果不存在带有指定ID的元素，则返回 `null`。
2. 通过类名获取元素
`document.getElementsByClassName()` 方法可以获取带有特定类名的所有元素。它返回一个类似数组的对象（HTMLCollection），包含了所有匹配的元素。
var elements = document.getElementsByClassName('className');
3. 通过标签名获取元素
`document.getElementsByTagName()` 方法可以获取指定标签名的所有元素，同样返回一个HTMLCollection。
var elements = document.getElementsByTagName('tagName');
4. 通过CSS选择器获取元素
`document.querySelector()` 和 `document.querySelectorAll()` 方法提供了更为强大的选择元素的方式。`querySelector()` 返回第一个匹配的元素，而 `querySelectorAll()` 返回所有匹配的元素，返回的是一个NodeList。
var element = document.querySelector('.className'); // 返回第一个匹配的元素
var elements = document.querySelectorAll('.className'); // 返回所有匹配的元素
这些方法接受任何有效的CSS选择器，使得选择元素变得非常灵活。
5. 属性选择器
还可以使用属性选择器来获取元素，这在处理具有特定属性（如 `data-*` 属性）的元素时特别有用。
var elements = document.querySelectorAll('[data-custom="value"]');
注意事项
- `getElementById()` 是最快的获取元素的方法，因为ID是唯一的。
- `getElementsByClassName()` 和 `getElementsByTagName()` 返回的HTMLCollection是实时的，这意味着如果DOM改变，它们的内容会自动更新。
- `querySelector()` 和 `querySelectorAll()` 返回的NodeList不是实时的，但它们提供了更灵活的选择器。
- 在使用类名或选择器获取元素时，考虑浏览器兼容性。对于老版本的IE浏览器，可能需要使用更旧的API或额外的库。
掌握这些方法，前端开发者就能灵活地获取页面元素，进行后续的DOM操作，从而实现丰富的动态交互效果。