跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

JavaScript 文档对象（Document）核心属性实战解析

JavaScript Document 对象是 DOM 操作的根节点，提供访问和修改网页结构、内容及样式的能力。本文详细解析了 60 个常用属性，涵盖文档元数据（如 title、URL）、元素集合（body、forms）、加载状态（readyState）、事件处理及兼容性相关属性。重点说明了现代开发中的最佳实践，例如使用 querySelector 替代旧式选择器，注意同源策略限制，以及废弃属性的替代方案。通过实际代码示例，帮助开发者高效掌握 Document 核心功能，构建动态交互的 Web 应用。

Kubernet发布于 2026/3/22更新于 2026/8/2350 浏览
JavaScript 文档对象（Document）核心属性实战解析

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/'

document.cookie

获取或设置与当前文档关联的 HTTP Cookie。

// 读取所有 cookie
let allCookies = document.cookie; 

// 写入新 cookie (追加或修改)
document.cookie = "language=zh-CN; path=/";

写入时需注意格式，包括过期时间、路径等参数。

文档元素集合

document.body & document.head

分别返回 <body> 和 <head> 元素对象。

document.body.style.backgroundColor = 'lightblue';
console.log(document.head.innerHTML);

document.forms, images, links, scripts

返回对应类型元素的集合（HTMLCollection），可通过索引或 name 属性访问。

let firstForm = document.forms[0];
let loginForm = document.forms['loginForm'];
console.log(document.images.length); // 图片总数
for (let img of document.images) {
    console.log(img.src);
}

document.anchors

返回带有 name 属性的 <a> 元素集合。现代 HTML5 推荐使用 id，此集合在现代页面中可能为空。

文档结构与视图

document.doctype

返回文档类型声明对象（如 <!DOCTYPE html>），无声明则返回 null。

console.log(document.doctype.name); // 输出：'html'

document.documentElement

返回根元素 <html>，常用于获取视口高度等。

let fullPageHeight = document.documentElement.scrollHeight;

document.defaultView

返回关联的 window 对象，在 iframe 中可用于获取内部全局对象。

let isChrome = document.defaultView.navigator.userAgent.includes('Chrome');

document.activeElement

返回当前获得焦点的元素，常用于表单验证。

if (document.activeElement.id === 'username') {
    console.log('用户正在输入用户名');
}

document.baseURI

返回文档的绝对基础 URL，由页面 URL 和 <base> 标签决定。

编码与状态

document.characterSet

返回文档字符编码（如 UTF-8），charset 是其别名。

console.log(document.characterSet); // 输出：'UTF-8'

document.readyState

返回加载状态：loading（加载中）、interactive（DOM 解析完成）、complete（完全加载）。

if (document.readyState === 'complete') {
    console.log('页面完全加载好了');
}

文件信息与遗留属性

*注意：以下部分属性为非标准或已废弃，主要见于旧版 IE，现代开发建议避免使用。

document.lastModified

返回文档最后修改日期字符串。

console.log('本页面最后更新于：' + document.lastModified);

document.bgColor / fgColor / linkColor 等

这些颜色属性已废弃，应使用 CSS 控制（如 document.body.style.backgroundColor）。

集合与扩展

document.all

非标准属性，曾广泛用于 IE，现代浏览器为兼容保留。建议使用 querySelectorAll('*') 替代。

document.location

返回 Location 对象，可导航或跳转。

console.log(document.location.hostname);
document.location.href = 'https://example.com';

节点导航与关系属性

document.firstChild / lastChild / childNodes

返回文档节点的子节点（NodeList），包含文本、注释等，不限于元素。

for (let node of document.childNodes) {
    console.log(node.nodeType, node.nodeName);
}

document.firstElementChild / children

仅返回元素节点，忽略文本和注释。

console.log(document.firstElementChild.tagName); // 输出：'HTML'

document.nodeName / nodeType

Document 节点名称固定为 #document，类型为 9。

文档事件与处理程序

虽然常用 addEventListener，但以下属性也可绑定事件处理函数：

  • onload: 文档加载完成。
  • onreadystatechange: 监听加载状态变化。
  • onscroll: 滚动事件。
  • onclick: 点击事件。
  • onkeydown: 键盘按下。
  • oncopy: 复制事件。

示例：

document.onclick = function(e) {
    console.log('点击了：' + e.target.tagName);
};

文档兼容性与视图

document.compatMode

返回渲染模式：CSS1Compat（标准模式）或 BackCompat（怪异模式）。

document.hidden / visibilityState

用于页面可见性 API，检测页面是否在后台。

if (document.hidden) {
    console.log('用户切换到了其他标签页');
}

document.designMode / execCommand

控制整个文档是否可编辑，类似富文本编辑器。

document.designMode = 'on';
document.execCommand('bold', false, null);

文档集合与特殊属性

document.styleSheets

返回所有样式表对象列表，可动态操作 CSS 规则。

document.fonts

FontFaceSet 对象，用于检查字体加载状态。

document.fonts.ready.then(() => {
    console.log('所有字体加载完成');
});

document.currentScript

返回当前正在执行的 <script> 元素，适用于动态脚本。

document.fullscreenElement

返回当前全屏模式的元素，若无则为 null。

总结列表

属性含义备注
document.title文档标题可读可写
document.URL完整 URL只读
document.domain域名跨子域通信用
document.cookieCookie 字符串读写需谨慎
document.bodybody 元素常用操作入口
document.forms表单集合HTMLCollection
document.images图片集合遍历统计用
document.links链接集合含 href 的 a/area
document.doctype文档类型DocumentType 对象
document.documentElementhtml 根元素标准根节点
document.activeElement焦点元素表单验证有用
document.readyState加载状态loading/interactive/complete
document.lastModified最后修改时间字符串格式
document.all所有元素非标准，不推荐
document.location位置对象可跳转
document.children子元素集合忽略文本/注释
document.nodeName节点名称总是 #document
document.nodeType节点类型文档节点为 9
document.compatMode渲染模式CSS1Compat/BackCompat
document.hidden隐藏状态布尔值
document.designMode设计模式on/off
document.styleSheets样式表列表StyleSheetList
document.fonts字体集FontFaceSet
document.currentScript当前脚本执行期间有效
document.fullscreenElement全屏元素全屏 API

掌握这些属性能帮助你更高效地操控页面。在实际开发中，优先选择标准属性，关注兼容性提示，并善用现代 API（如 querySelector）替代老旧方法。

目录

  1. JavaScript 文档对象（Document）核心属性实战解析
  2. 文档元数据与位置
  3. document.title
  4. document.URL
  5. document.domain
  6. document.referrer
  7. document.cookie
  8. 文档元素集合
  9. document.body & document.head
  10. document.forms, images, links, scripts
  11. document.anchors
  12. 文档结构与视图
  13. document.doctype
  14. document.documentElement
  15. document.defaultView
  16. document.activeElement
  17. document.baseURI
  18. 编码与状态
  19. document.characterSet
  20. document.readyState
  21. 文件信息与遗留属性
  22. document.lastModified
  23. document.bgColor / fgColor / linkColor 等
  24. 集合与扩展
  25. document.all
  26. document.location
  27. 节点导航与关系属性
  28. document.firstChild / lastChild / childNodes
  29. document.firstElementChild / children
  30. document.nodeName / nodeType
  31. 文档事件与处理程序
  32. 文档兼容性与视图
  33. document.compatMode
  34. document.hidden / visibilityState
  35. document.designMode / execCommand
  36. 文档集合与特殊属性
  37. document.styleSheets
  38. document.fonts
  39. document.currentScript
  40. document.fullscreenElement
  41. 总结列表
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • C++ 与 ROS 中 int main(int argc, char* argv[]) 的区别
  • Meta Quest VR 眼镜开机无法自动重连 WiFi 的解决方法
  • 网络安全行业入门指南：主流认证体系与职业发展路径解析
  • Java OCR 实战：RapidOCR 快速集成与优化指南
  • OpenFPGA FPGA IP 核生成技术指南
  • AI 生成 PPT 工具评测：智能排版与协作功能对比
  • SRC 漏洞挖掘流程及 CNVD 提交指南
  • AI 工具泛滥时代，为何个人能力变现变难？
  • SpringBoot 整合 Neo4j 图数据库项目实战详解
  • Maven 基础入门：在 IntelliJ IDEA 中创建与配置项目
  • Llama3 快速部署方案：基于 Groq 的高性能推理实践
  • 五大经典排序算法详解：插入、希尔、冒泡、选择与堆排序
  • Web 应用项目开发全流程：从需求到上线的实战指南
  • 汇川机器人软件 RobotLab 基础操作指南
  • Mac 上 Maven 安装与环境变量配置指南
  • 基于 YOLOv11 系列的电动自行车违规载人检测系统开发实践
  • Python 短视频平台数据抓取：视频与评论采集
  • 飞书机器人对接 Claude Code：实现手机端 AI 编程助手
  • Stable Diffusion 模型加载报错解决方案
  • 算法基础：前缀和技巧与区间求和优化

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online