HTML中Document对象有什么用

# HTML中Document对象有什么用

## 引言

在Web开发中，`document`对象是浏览器提供的核心API之一，它是DOM（文档对象模型）的入口点。理解`document`对象的作用对于操作网页内容、实现动态交互至关重要。本文将深入探讨`document`对象的功能和应用场景。

## 一、Document对象基础

### 1. 什么是Document对象
`document`是浏览器全局对象`window`的一个属性，代表当前加载的HTML文档。通过它，开发者可以：
- 访问和修改页面元素
- 操作DOM树结构
- 控制文档的生命周期事件

### 2. 获取Document对象
在浏览器环境中，直接使用`document`即可调用：
```javascript
console.log(document); // 输出整个文档对象

二、核心功能详解

1. 元素选择与查询

document提供了多种元素选择方法：

// 修改元素内容示例
const title = document.getElementById('title');
title.textContent = '新标题';

2. 元素创建与修改

// 创建新元素
const newDiv = document.createElement('div');
newDiv.className = 'alert';

// 添加文本节点
const textNode = document.createTextNode('Hello World!');
newDiv.appendChild(textNode);

// 插入到DOM中
document.body.appendChild(newDiv);

3. 事件处理

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM已完全加载');
});

// 委托点击事件
document.addEventListener('click', (e) => {
  if(e.target.matches('.delete-btn')) {
    e.target.parentElement.remove();
  }
});

三、高级应用场景

1. 动态样式操作

// 修改整个文档样式
document.documentElement.style.setProperty('--main-color', '#ff0000');

// 禁用用户选择
document.body.style.userSelect = 'none';

2. Cookie操作

// 写入Cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC";

// 读取Cookie
console.log(document.cookie);

3. 文档信息获取

console.log(document.title);   // 获取页面标题
console.log(document.URL);    // 获取完整URL
console.log(document.charset);// 获取字符编码

四、性能优化建议

1. 缓存查询结果：避免重复查询DOM “`javascript // 不佳做法 for(let i=0; i<100; i++) { document.querySelector(‘.item’).style.color = ‘red’; }

// 推荐做法 const item = document.querySelector(‘.item’); for(let i=0; i<100; i++) { item.style.color = ‘red’; }

2. **批量DOM操作**：使用`DocumentFragment`减少重绘
   ```javascript
   const fragment = document.createDocumentFragment();
   for(let i=0; i<100; i++){
     const div = document.createElement('div');
     fragment.appendChild(div);
   }
   document.body.appendChild(fragment);

五、兼容性注意事项

1. 现代浏览器基本都支持标准的documentAPI
2. 部分旧版IE特有方法（如document.all）已废弃
3. 移动端触摸事件需使用document.addEventListener('touchstart', ...)

结语

document对象作为连接JavaScript与HTML的桥梁，其功能远不止本文所述。掌握它的使用不仅能实现基础DOM操作，还能为SPA开发、性能优化等高级场景奠定基础。建议开发者通过MDN文档进一步探索其完整API。

参考资源： - MDN Document文档 - DOM Level 3规范 - Web性能优化指南 “`