JavaScript中Document对象常见的属性分析：DOM的“总管家”详解
引言：Document对象，网页的“核心枢纽”
在JavaScript中，Document对象是DOM（Document Object Model，文档对象模型）的根节点，代表整个HTML/XML文档。它像网页的“总管家”，提供访问、修改和操作文档元素的接口。2026年，随着WebAssembly和PWA（Progressive Web App）的普及，Document属性仍是前端开发的基石——据MDN报告，80%以上的JS交互依赖Document。常见属性如title、body、cookie等，不仅用于动态更新页面，还支持事件监听和表单验证。本文剖析10大高频属性（基于W3C标准与Chrome 120+兼容性），从定义、作用到实战代码，按功能分类。目标：掌握后，你能轻松构建响应式UI，提升代码可维护性。预计阅读时长：15分钟。准备浏览器控制台？立即实验！
核心属性速览：功能分类表格
Document属性多样，按“文档元数据”、“结构元素”、“交互状态”分类。以下表格汇总关键信息（数据源：MDN Web Docs，兼容性>95%）：
| 分类 | 属性名称 | 类型/返回值 | 主要作用 | 兼容性（浏览器） | 示例场景 |
|---|---|---|---|---|---|
| 文档元数据 | title | string | 获取/设置页面标题 | 全支持 | SEO优化/动态标题更新 |
| 文档元数据 | URL | string | 当前文档URL（全路径） | 全支持 | 路由跳转/日志记录 |
| 文档元数据 | referrer | string | 来源页面URL（空则无） | 全支持 | 防盗链/来源统计 |
| 文档元数据 | cookie | string | 获取/设置Cookie字符串 | 全支持 | 用户会话/状态持久化 |
| 结构元素 | head | HTMLHeadElement | 元素引用 | 全支持 | 动态添加/ |
