JavaScript 中的 Document 对象详解
一、Document 对象概述
1. 定义与作用
Document 对象是浏览器中 HTML 文档的入口点，是 Window 对象的属性（即 window.document）。它代表整个 HTML 页面，提供了操作和访问页面内容的方法和属性，是 DOM（文档对象模型）的核心。
2. 核心功能
- 访问和修改 HTML 元素
- 处理事件
- 动态创建和修改页面内容
- 操作 CSS 样式
- 与浏览器历史记录交互
- 处理 cookies
3. 文档类型
Document 对象可以表示不同类型的文档：
- HTML 文档（HTMLDocument）
- XML 文档（XMLDocument）
- SVG 文档（SVGDocument）
二、Document 对象的基本属性
1. 文档元信息
URL 相关
console.log(document.URL); // 当前文档的完整 URL
console.log(document.domain); // 当前文档的域名
console.log(document.baseURI); // 文档的基础 URI
标题和字符编码
document.title = '新标题'; // 获取或设置文档标题
document.charset = 'UTF-8'; // 获取或设置字符编码
引用和最后修改时间
console.log(document.referrer); // 链接到当前页面的前一个页面的 URL
console.log(document.lastModified); // 文档的最后修改时间
2. 文档结构引用
根元素
const htmlElement = document.documentElement; // <html> 元素
body 和 head
const body = document.body; // <body> 元素
const head = document.head; // <head> 元素
文档模式
console.log(document.compatMode); // 文档渲染模式 (CSS1Compat 或 BackCompat)
3. 文档状态
console.log(document.readyState); // 文档加载状态: loading, interactive, complete
// 监听文档加载完成
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM 加载完成');
});
window.addEventListener('load', () => {
console.log('页面完全加载完成');
});
三、选择和查找元素
1. 通过 ID 选择
const element = document.getElementById('myId'); // 返回单个元素
2. 通过标签名选择
const elements = document.getElementsByTagName('p'); // 返回 HTMLCollection
3. 通过类名选择
const elements = document.getElementsByClassName('myClass'); // 返回 HTMLCollection
4. 通过选择器选择
querySelector
const element = document.querySelector('div.container'); // 返回第一个匹配的元素
querySelectorAll
const elements = document.querySelectorAll('p.highlight'); // 返回 NodeList
5. 元素集合差异
HTMLCollection
- 动态集合，元素变化时自动更新
- 只能通过索引访问
- 示例：
getElementsByTagName()的返回值
NodeList
- 静态集合或动态集合（取决于创建方式）
- 可以通过索引和 forEach 访问
- 示例：
querySelectorAll()的返回值
四、创建和修改元素
1. 创建元素
const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.textContent = '新创建的元素';
2. 添加元素
appendChild
document.body.appendChild(newDiv
