在前端开发中，`document` 对象是浏览器提供的一个全局对象，它代表了当前网页的 DOM（文档对象模型）。通过 `document` 对象，开发者可以轻松地与 HTML 文档进行交互，例如获取元素、操作内容、监听事件等。本文将详细介绍一些常用的 `document` 对象方法，并结合实际场景说明其用途。
1. `getElementById(id)`
`getElementById` 是最常用的方法之一，用于根据指定的 ID 获取单个元素。ID 是 HTML 元素的唯一标识符，因此该方法返回的结果通常是唯一的。
```javascript
const title = document.getElementById('main-title');
console.log(title.textContent); // 输出主标题文本
```
适用场景：当你需要对某个特定元素进行操作时，比如动态修改内容或添加样式。
2. `querySelector(selector)`
`querySelector` 方法允许你使用 CSS 选择器来选取第一个匹配的元素。相比 `getElementById`，它的灵活性更高，支持更多复杂的查询条件。
```javascript
const firstParagraph = document.querySelector('p');
console.log(firstParagraph.innerHTML); // 输出第一个段落的内容
```
适用场景：当你需要根据 CSS 类名、标签名或其他选择器获取元素时。
3. `getElementsByTagName(tagName)`
`getElementsByTagName` 方法返回所有带有指定标签名的元素集合（HTMLCollection）。虽然不如 `querySelectorAll` 灵活，但在处理大量同类型元素时非常高效。
```javascript
const links = document.getElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
console.log(links[i].href);
}
```
适用场景：当你需要遍历一组具有相同标签名的元素时。
4. `getElementsByClassName(className)`
与 `getElementsByTagName` 类似，`getElementsByClassName` 返回的是包含指定类名的所有元素集合。它比 `querySelectorAll` 更快，但只能通过类名筛选。
```javascript
const buttons = document.getElementsByClassName('btn');
for (const button of buttons) {
button.style.backgroundColor = 'blue';
}
```
适用场景：当你需要批量修改具有相同类名的元素样式时。
5. `createElement(tagName)`
`createElement` 方法用于创建一个新的 HTML 元素节点。配合其他方法，它可以用来动态生成页面结构。
```javascript
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的 div';
document.body.appendChild(newDiv);
```
适用场景：当需要动态插入内容到页面时，比如实现懒加载效果。
6. `addEventListener(event, callback)`
虽然 `addEventListener` 不属于 `document` 对象本身，但它经常与 `document` 结合使用，用于绑定事件监听器。通过这种方式，你可以为整个文档绑定全局事件。
```javascript
document.addEventListener('click', function () {
alert('您点击了页面！');
});
```
适用场景：当你希望在整个页面范围内监听某种事件时。
7. `write(text)`
`write` 方法可以直接向文档写入内容，但需要注意的是，它可能会覆盖现有内容，因此在生产环境中不推荐使用。
```javascript
document.write('
欢迎访问我们的网站
');```
适用场景：仅适用于简单的调试场景。
总结
以上介绍了 `document` 对象的一些核心方法及其应用场景。熟练掌握这些方法可以帮助开发者更高效地操作 DOM，从而提升代码质量和用户体验。当然，随着现代前端框架（如 React、Vue）的普及，直接操作 DOM 的需求逐渐减少，但在某些基础项目或兼容性需求中，它们依然是不可或缺的一部分。
如果你对某个方法还有疑问，欢迎留言讨论！
