JavaScript 文档对象(Document)核心属性实战解析
在 Web 开发中,document 对象是 DOM 的根节点,也是操作 HTML 文档的核心接口。通过它,我们可以访问和修改页面的结构、内容与样式,实现动态更新、表单验证及用户交互响应。其丰富的属性不仅涵盖文档的基本元数据,还提供了对页面元素集合的直接访问,是现代前端开发和单页应用(SPA)不可或缺的基础。
随着 Web 标准的演进,document 也在不断扩展,支持 Shadow DOM、MutationObserver 等新特性。未来它将更注重性能优化与安全性。下面,我们结合实战场景,逐一分析 document 对象常见的 60 个关键属性。
文档元数据与位置
document.title
用于获取或设置当前文档的标题,即浏览器标签页上显示的文字。
console.log(document.title); // 获取当前标题
document.title = '新标题'; // 设置新标题
注意:设置时会覆盖 <title> 标签内容,但不会直接修改 DOM 树中的节点值,只是同步显示。
document.URL
返回当前文档的完整 URL 地址(只读),包含协议、主机、路径等。
let currentUrl = document.URL;
// 假设输出:https://example.com/page?id=1#section
不可写,尝试赋值无效。
document.domain
获取或设置当前文档的域名,主要用于同源策略下的跨子域通信。
console.log(document.domain); // 例如:'www.example.com'
document.domain = 'example.com'; // 需设置为更高级别的相同后缀
现代浏览器对此限制严格,通常只能设为父域,且不能设为顶级域名。
document.referrer
返回链接到当前页面的来源页面 URL(只读)。若直接打开页面则返回空字符串。
console.log(document.referrer); // 例如:'https://www.google.com/'


