跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
JavaScript大前端

JavaScript 中 Document 对象的常见属性详解

综述由AI生成JavaScript Document 对象作为 DOM 根节点,提供操作 HTML 文档的核心接口。文章系统梳理了 60 个常见属性,覆盖元数据、元素集合、结构视图、编码状态、文件信息及事件处理等十大板块。通过语法说明、代码示例及废弃属性提示,帮助开发者理解页面交互、动态更新及浏览器兼容性控制的关键方法。

NodeJser发布于 2026/3/24更新于 2026/5/38 浏览
JavaScript 中 Document 对象的常见属性详解

JavaScript 中的 Document 对象是网页开发的核心接口,作为 DOM(文档对象模型)的根节点,它为开发者提供了操作 HTML 文档的桥梁。通过 Document 对象,可以访问和修改页面的结构、内容与样式,例如利用 document.getElementById 或 document.querySelector 获取元素,通过 document.title 或 document.cookie 读写文档信息,实现动态更新、表单验证、用户交互响应等功能。其丰富的属性不仅涵盖了文档的基本元数据,如 URL、标题、字符集、加载状态等,还提供了对页面元素集合的直接访问,如 forms、images、links 等,极大提升了开发效率和代码的可操作性。在现代前端开发中,Document 对象是实现动态网页和单页应用(SPA)不可或缺的基础,几乎所有与页面交互的JavaScript 逻辑都依赖于它。

随着 Web 标准的演进,Document 对象也在不断扩展和完善。W3C 和 WHATWG 持续推动 DOM 规范的发展,使其支持更多现代 Web 特性,如 Shadow DOM、MutationObserver 等,增强了对复杂应用状态的监听与控制能力。未来,Document 对象将更加注重性能优化、安全性和跨平台兼容性,例如通过更高效的查询方法、更精细的权限控制来提升用户体验。同时,在 Web Components、渐进式 Web 应用(PWA)等新兴技术中,Document 对象将继续扮演关键角色,成为连接 JavaScript 与网页内容的核心枢纽。

下面,对 JavaScript 中 Document 对象常见的属性进行逐一分析讲解:


第一部分:文档元数据与位置 (1-5)

1. document.title

  • 含义:获取或设置当前文档的标题,也就是显示在浏览器标签页上的文字。
  • 词源:Title 在英文中意为'标题、名称'。
  • 语法:
    • 获取:let pageTitle = document.title;
    • 设置:document.title = '新标题';
  • 参数及说明:它是一个字符串。设置时会覆盖 HTML 中 <title> 标签的内容,但不会修改 DOM 树中的实际节点值(只是同步了显示)。

例子:

console.log(document.title); // 输出:当前页面的标签名
document.title = "欢迎光临我的网站"; // 浏览器标签页上的文字立刻改变

2. document.URL

  • 含义:返回当前文档的完整 URL 地址(只读)。
  • 词源:Uniform Resource Locator(统一资源定位器)的缩写。
  • 语法:let currentUrl = document.URL;
  • 参数及说明:它是一个只读字符串,包含协议、主机、端口、路径、查询参数和哈希。

例子:

// 假设当前地址是 https://example.com/page?id=1#section
console.(.); 

log
document
URL
// 输出:https://example.com/page?id=1#section
// document.URL = '新地址'; // 这样做是无效的,它不可写

3. document.domain

  • 含义:获取或设置当前文档的域名。
  • 词源:Domain(域名)。
  • 语法:let currentDomain = document.domain; 或 document.domain = 'example.com';
  • 参数及说明:它是一个字符串。主要用于同源策略的限制。在二级域名不同的跨子域通信中(如 a.example.com 和 b.example.com),可以将两边都设置为 example.com 来实现通信。现在该属性在现代浏览器中为了安全已被严格限制(通常只能设为更高级别的相同后缀,且不能设置为顶级域名)。

例子:

console.log(document.domain); // 假设输出:'www.example.com'
// 如果要与子域 api.example.com 通信,可以设置:
// document.domain = 'example.com';

4. document.referrer

  • 含义:返回链接到当前页面的那个页面的 URL(即来源页面地址,只读)。
  • 词源:Referrer(引荐人,来源)。
  • 语法:let referringPage = document.referrer;
  • 参数及说明:它是一个字符串。如果是直接打开页面(如输入网址或书签),则返回空字符串 ""。

例子:

// 如果你从 google.com 搜索后点击链接进来
console.log(document.referrer); // 输出:'https://www.google.com/'

5. document.cookie

  • 含义:获取或设置与当前文档相关联的 HTTP Cookie。
  • 词源:Cookie(小甜饼,网络数据包)。
  • 语法:
    • 读取:let allCookies = document.cookie;
    • 写入:document.cookie = "name=value; expires=date; path=path";
  • 参数及说明:读取时返回包含所有 Cookie 的字符串(格式如 key1=value1; key2=value2)。写入时是追加或修改,而不是覆盖全部。

例子:

console.log(document.cookie); // 输出:'username=John; theme=dark'
// 设置一个新 cookie
document.cookie = "language=zh-CN; path=/";

第二部分:文档元素集合 (6-12)

6. document.body

  • 含义:返回当前文档的 <body> 元素。
  • 词源:Body(身体、主体)。
  • 语法:let bodyElement = document.body;
  • 参数及说明:它是一个 HTMLBodyElement 对象。如果是框架集(Frameset)页面,可能返回 <frameset> 元素。

例子:

document.body.style.backgroundColor = 'lightblue'; // 让页面背景变蓝

7. document.head

  • 含义:返回当前文档的 <head> 元素。
  • 词源:Head(头部)。
  • 语法:let headElement = document.head;
  • 参数及说明:它是一个 HTMLHeadElement 对象。

例子:

console.log(document.head.innerHTML); // 查看 head 里有什么

8. document.forms

  • 含义:返回包含当前文档中所有 <form> 元素的集合(HTMLCollection)。
  • 词源:Forms(表单,复数)。
  • 语法:let formCollection = document.forms;
  • 参数及说明:可以通过索引([0])或表单的 name 属性(['formName'])访问具体的表单。

例子:

let firstForm = document.forms[0]; // 获取第一个表单
let loginForm = document.forms['loginForm']; // 获取 name="loginForm" 的表单

9. document.images

  • 含义:返回包含当前文档中所有 <img> 元素的集合(HTMLCollection)。
  • 词源:Images(图像,复数)。
  • 语法:let imageCollection = document.images;
  • 参数及说明:常用于遍历所有图片,统计数量或懒加载。

例子:

console.log(document.images.length); // 输出页面中图片的总数
for (let img of document.images) {
    console.log(img.src);
}

10. document.links

  • 含义:返回包含当前文档中所有带有 href 属性的 <a> 和 <area> 元素的集合。
  • 词源:Links(链接,复数)。
  • 语法:let linkCollection = document.links;
  • 参数及说明:只包含有具体地址的链接锚点。

例子:

document.links[0].href = 'https://newsite.com'; // 修改第一个链接的地址

11. document.anchors

  • 含义:返回包含当前文档中所有带有 name 属性的 <a> 元素的集合。
  • 词源:Anchors(锚点,复数)。
  • 参数及说明:在现代 HTML5 中,name 属性在 <a> 上已不推荐使用,通常用 id 代替,因此这个集合在现代页面中可能为空。

例子:

// 如果有一个 <a name="section1"></a>
console.log(document.anchors['section1']); // 可以获取到

12. document.scripts

  • 含义:返回包含当前文档中所有 <script> 元素的集合。
  • 词源:Scripts(脚本,复数)。
  • 语法:let scriptCollection = document.scripts;
  • 参数及说明:常用于动态分析页面加载了哪些脚本。

例子:

console.log('页面加载了 ' + document.scripts.length + ' 个 JS 文件');

第三部分:文档结构与视图 (13-17)

13. document.doctype

  • 含义:返回当前文档的文档类型声明(Document Type Declaration,即 <!DOCTYPE html>)。
  • 词源:Doc(Document 缩写)+ Type(类型)。
  • 语法:let doctype = document.doctype;
  • 参数及说明:返回一个 DocumentType 对象,如果没有声明则返回 null。

例子:

console.log(document.doctype.name); // 输出:'html' (如果是 HTML5 标准)

14. document.documentElement

  • 含义:返回当前文档的根元素,即 <html> 标签。
  • 词源:Document(文档)+ Element(元素)。
  • 语法:let htmlElement = document.documentElement;
  • 参数及说明:这是获取整个 HTML 文档根节点的标准方法。常用于获取视口高度等。

例子:

let fullPageHeight = document.documentElement.scrollHeight; // 获取整个文档滚动高度

15. document.defaultView

  • 含义:返回当前文档所关联的 window 对象。
  • 词源:Default(默认)+ View(视图)。
  • 语法:let win = document.defaultView;
  • 参数及说明:在浏览器中,这通常等价于 window 对象。在 iframe 中,可以用来获取 iframe 内部的全局对象。

例子:

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

16. document.activeElement

  • 含义:返回当前文档中获得焦点(被选中、正在输入)的元素。
  • 词源:Active(活跃的)+ Element(元素)。
  • 语法:let activeEl = document.activeElement;
  • 参数及说明:常用于表单验证或 UI 状态判断。默认情况下,如果没有任何焦点,body 元素可能被返回。

例子:

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

17. document.baseURI

  • 含义:返回文档的绝对基础 URL(只读)。
  • 词源:Base(基础)+ URI(统一资源标识符)。
  • 语法:let baseUri = document.baseURI;
  • 参数及说明:通常由页面 URL 和 <base> 标签决定。如果没有 <base> 标签,它等同于 document.URL。

例子:

// 如果页面有 <base href="https://example.com/newbase/">
console.log(document.baseURI); // 输出:'https://example.com/newbase/'

第四部分:编码与状态 (18-20)

18. document.charset / 19. document.characterSet

  • 含义:返回文档使用的字符编码(如 "UTF-8","GB2312")。
  • 词源:Character Set(字符集)。
  • 语法:let encoding = document.characterSet;
  • 参数及说明:这两个属性通常返回相同的值,characterSet 是标准属性。

例子:

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

20. document.readyState

  • 含义:返回当前文档的加载状态。
  • 词源:Ready(准备就绪)+ State(状态)。
  • 语法:let state = document.readyState;
  • 参数及说明:有三个可能的值:
    • loading:正在加载。
    • interactive:文档解析完成,但图片、样式等仍在加载。
    • complete:文档和所有子资源加载完成。

例子:

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

第五部分:文件信息与遗留属性 (21-29)

*注意:fileCreatedDate,fileModifiedDate,fileSize 这些属性是非标准的,主要出现在旧版 IE 中,现代浏览器不支持或返回空值。

21. document.lastModified

  • 含义:返回文档最后修改的日期和时间字符串。
  • 词源:Last(最后)+ Modified(修改)。
  • 语法:let modDate = document.lastModified;
  • 参数及说明:返回字符串格式如 "12/25/2024 14:35:00"。

例子:

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

22. document.fileCreatedDate (非标准/IE)

  • 含义:在旧版 IE 中,尝试返回文件的创建日期。
  • 词源:File(文件)+ Created(创建)+ Date(日期)。
  • 语法:let createDate = document.fileCreatedDate;
  • 说明:现代浏览器中无此属性,会返回 undefined。

23. document.fileModifiedDate (非标准/IE)

  • 含义:同 lastModified,旧版 IE 的另一别名。
  • 词源:File(文件)+ Modified(修改)+ Date(日期)。

24. document.fileSize (非标准/IE)

  • 含义:在旧版 IE 中,返回文档的大小(字节数)。
  • 词源:File(文件)+ Size(大小)。

25. document.bgColor

  • 含义:获取或设置文档的背景颜色(已废弃)。
  • 词源:Background(背景)+ Color(颜色)。
  • 语法:document.bgColor = "#FF0000";
  • 说明:这是一个非常老的属性,来自 DOM Level 0。现在应使用 document.body.style.backgroundColor 代替。

例子:

document.bgColor = "yellow"; // 不推荐使用

26. document.fgColor

  • 含义:获取或设置文档的前景色(文本颜色,已废弃)。
  • 词源:Foreground(前景)+ Color(颜色)。
  • 语法:document.fgColor = "black";
  • 说明:现在应使用 CSS 的 color 属性。

27. document.linkColor

  • 含义:获取或设置文档中未访问链接的颜色(<a>,已废弃)。
  • 词源:Link(链接)+ Color(颜色)。
  • 说明:对应 CSS 的 :link 伪类。现在应使用 CSS 控制。

28. document.alinkColor

  • 含义:获取或设置激活链接(鼠标按下瞬间)的颜色(已废弃)。
  • 词源:Active Link(激活的链接)+ Color(颜色)。
  • 说明:对应 CSS 的 :active 伪类。

29. document.vlinkColor

  • 含义:获取或设置已访问过链接的颜色(已废弃)。
  • 词源:Visited Link(已访问链接)+ Color(颜色)。
  • 说明:对应 CSS 的 :visited 伪类。

第六部分:集合与扩展 (30-32)

30. document.all

  • 含义:返回一个包含文档中所有 HTML 元素的集合(HTMLAllCollection)。
  • 词源:All(所有)。
  • 语法:let allElements = document.all;
  • 参数及说明:这是一个非标准但曾被广泛支持的属性(源自 IE)。现代浏览器为了兼容性保留了它,但建议使用 document.querySelectorAll('*') 代替。它是一个类数组对象,同时也是一个 falsy 值,常用于检测浏览器是否为 IE。

例子:

// 获取页面上第 5 个元素
let element = document.all[4];
// 检测 IE 的古老写法(现在不推荐)
if (document.all) { // 如果是 IE }

31. document.expando

  • 含义:一个旧版 IE 属性,允许或禁止在 DOM 对象上扩展自定义属性。
  • 词源:Expando(扩展属性,源自 'expand')。
  • 语法:document.expando = false;
  • 参数及说明:如果设置为 false,则不能给 DOM 元素添加自定义属性。现代浏览器无此限制。

例子:

// 在旧版 IE 中
document.expando = false;
document.body.myCustomProp = "test"; // 这将会失败

32. document.location

  • 含义:返回一个 Location 对象,包含文档 URL 的信息,并且可以用来导航。
  • 词源:Location(位置)。
  • 语法:
    • 获取信息:let path = document.location.pathname;
    • 跳转页面:document.location.href = 'https://example.com'; 或 document.location.reload();
  • 参数及说明:document.location 和 window.location 通常是同一个对象。它既是只读的(直接读取时返回字符串),但也可以通过赋值字符串进行跳转。

例子:

console.log(document.location.hostname); // 输出当前域名
// 3 秒后跳转到百度
setTimeout(() => {
    document.location = 'https://www.baidu.com';
}, 3000);

第七部分:节点导航与关系属性 (33-40)

33. document.firstChild

  • 含义:返回文档节点的第一个子节点。
  • 词源:First(第一个)+ Child(孩子)。
  • 语法:let first = document.firstChild;
  • 参数及说明:对于 HTML 文档,通常第一个子节点可能是 <!DOCTYPE> 声明或空白文本节点(换行符)。返回的是 Node 类型,不一定是元素节点。

例子:

console.log(document.firstChild.nodeName); // 可能输出 '#comment' 或 'html' 或 '#text'

34. document.lastChild

  • 含义:返回文档节点的最后一个子节点。
  • 词源:Last(最后一个)+ Child(孩子)。
  • 语法:let last = document.lastChild;
  • 参数及说明:通常最后一个子节点是 <html> 元素。

例子:

console.log(document.lastChild.nodeName); // 通常输出 'HTML'

35. document.childNodes

  • 含义:返回包含文档节点所有子节点的 NodeList。
  • 词源:Child(孩子)+ Nodes(节点,复数)。
  • 语法:let children = document.childNodes;
  • 参数及说明:这是一个类数组对象,包含文档类型声明和根元素。不会递归获取所有后代节点,只获取直接子节点。

例子:

for (let node of document.childNodes) {
    console.log(node.nodeType, node.nodeName); // 输出:10 'html' 之类的信息
}

36. document.firstElementChild

  • 含义:返回文档节点的第一个元素子节点(忽略文本和注释)。
  • 词源:First(第一个)+ Element(元素)+ Child(孩子)。
  • 语法:let firstEl = document.firstElementChild;
  • 参数及说明:对于 HTML 文档,这通常是 <html> 元素。只考虑元素节点,忽略空白和 DOCTYPE。

例子:

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

37. document.lastElementChild

  • 含义:返回文档节点的最后一个元素子节点。
  • 词源:Last(最后一个)+ Element(元素)+ Child(孩子)。
  • 语法:let lastEl = document.lastElementChild;
  • 说明:通常也是 <html> 元素,因为通常只有一个根元素。

例子:

console.log(document.lastElementChild === document.documentElement); // true

38. document.children

  • 含义:返回包含文档节点所有元素子节点的 HTMLCollection。
  • 词源:Children(孩子们,复数)。
  • 语法:let elementChildren = document.children;
  • 参数及说明:只包含元素节点,不包含 DOCTYPE 或文本节点。通常只有一个元素:<html>。

例子:

console.log(document.children.length); // 通常是 1
console.log(document.children[0].tagName); // 输出:'HTML'

39. document.nodeName

  • 含义:返回文档节点的名称。
  • 词源:Node(节点)+ Name(名称)。
  • 语法:let name = document.nodeName;
  • 参数及说明:对于 Document 节点,总是返回 "#document"。

例子:

console.log(document.nodeName); // 输出:'#document'

40. document.nodeType

  • 含义:返回文档节点的类型编号。
  • 词源:Node(节点)+ Type(类型)。
  • 语法:let type = document.nodeType;
  • 参数及说明:Document 节点的类型是 9。
    • 1:元素节点
    • 3:文本节点
    • 8:注释节点
    • 9:文档节点

例子:

console.log(document.nodeType); // 输出:9

第八部分:文档事件与处理程序 (41-46)

41. document.onload

  • 含义:文档加载完成时触发的事件处理程序。
  • 词源:On(当...时)+ Load(加载)。
  • 语法:document.onload = function() { ... };
  • 参数及说明:通常更常用的是 window.onload 或 DOMContentLoaded。document.onload 不如 window.onload 支持广泛。

例子:

document.onload = function() {
    console.log('文档加载完成');
};

42. document.onreadystatechange

  • 含义:当 document.readyState 属性改变时触发的事件。
  • 词源:On(当...时)+ Ready(准备)+ State(状态)+ Change(改变)。
  • 语法:document.onreadystatechange = function() { ... };
  • 参数及说明:可以用来监听文档加载状态的变化,从 loading 到 interactive 再到 complete。

例子:

document.onreadystatechange = function() {
    if (document.readyState === 'interactive') {
        console.log('DOM 解析完成,但资源还在加载');
    }
    if (document.readyState === 'complete') {
        console.log('页面完全加载完成');
    }
};

43. document.onscroll

  • 含义:当文档滚动时触发的事件处理程序。
  • 词源:On(当...时)+ Scroll(滚动)。
  • 语法:document.onscroll = function() { ... };
  • 参数及说明:也可以添加到 window 对象上。监听整个页面的滚动事件。

例子:

document.onscroll = function() {
    console.log('滚动位置:' + window.scrollY);
};

44. document.onclick

  • 含义:当文档被点击时触发的事件处理程序。
  • 词源:On(当...时)+ Click(点击)。
  • 语法:document.onclick = function(event) { ... };
  • 参数及说明:事件对象包含点击位置、目标元素等信息。

例子:

document.onclick = function(e) {
    console.log('点击了:' + e.target.tagName);
    console.log('坐标:' + e.clientX + ', ' + e.clientY);
};

45. document.onkeydown

  • 含义:当键盘按键被按下时触发的事件处理程序。
  • 词源:On(当...时)+ Key(键)+ Down(向下/按下)。
  • 语法:document.onkeydown = function(event) { ... };
  • 参数及说明:事件对象包含按下的键码、是否按了 Ctrl 等信息。

例子:

document.onkeydown = function(e) {
    if (e.key === 'Escape') {
        console.log('按下了 ESC 键');
        closeModal(); // 假设有一个关闭弹窗的函数
    }
};

46. document.oncopy

  • 含义:当用户复制文档内容时触发的事件处理程序。
  • 词源:On(当...时)+ Copy(复制)。
  • 语法:document.oncopy = function(event) { ... };
  • 参数及说明:可以用于修改复制的内容,或者阻止复制。

例子:

document.oncopy = function(e) {
    alert('内容已复制!'); // 修改复制的内容
    e.clipboardData.setData('text/plain', '复制的内容被修改了');
    e.preventDefault(); // 阻止默认复制行为
};

第九部分:文档兼容性与视图 (47-53)

47. document.compatMode

  • 含义:返回文档的渲染模式,是怪异模式还是标准模式。
  • 词源:Compat(兼容性)+ Mode(模式)。
  • 语法:let mode = document.compatMode;
  • 参数及说明:返回两个值之一:
    • 'CSS1Compat':标准模式(严格模式)
    • 'BackCompat':怪异模式(混杂模式,兼容旧浏览器)

例子:

if (document.compatMode === 'CSS1Compat') {
    console.log('标准模式渲染');
} else {
    console.log('怪异模式渲染');
}

48. document.documentURI

  • 含义:返回文档的位置(URI)。
  • 词源:Document(文档)+ URI(统一资源标识符)。
  • 语法:let uri = document.documentURI;
  • 参数及说明:和 document.URL 基本相同,但在某些 XML 文档中可能行为略有不同。

例子:

console.log(document.documentURI); // 输出当前 URL

49. document.inputEncoding

  • 含义:返回文档的字符编码(已废弃)。
  • 词源:Input(输入)+ Encoding(编码)。
  • 语法:let encoding = document.inputEncoding;
  • 说明:已被 document.characterSet 取代。

例子:

// 现代浏览器请使用 document.characterSet
console.log(document.characterSet);

50. document.hidden

  • 含义:返回一个布尔值,表示页面是否被隐藏(例如在后台标签页中)。
  • 词源:Hidden(隐藏的)。
  • 语法:let isHidden = document.hidden;
  • 参数及说明:用于页面可见性 API。如果页面被隐藏返回 true,否则返回 false。

例子:

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        console.log('用户切换到了其他标签页');
        pauseVideo(); // 暂停视频播放
    } else {
        console.log('用户回来了');
        playVideo(); // 恢复播放
    }
});

51. document.visibilityState

  • 含义:返回文档的可见性状态。
  • 词源:Visibility(可见性)+ State(状态)。
  • 语法:let state = document.visibilityState;
  • 参数及说明:可能的值:
    • 'visible':页面在前台标签页,窗口未最小化
    • 'hidden':页面在后台标签页或窗口最小化
    • 'prerender':页面正在预渲染(不可见)
    • 'unloaded':页面正在卸载

例子:

if (document.visibilityState === 'visible') {
    console.log('页面可见,可以执行动画');
}

52. document.designMode

  • 含义:控制整个文档是否可编辑。
  • 词源:Design(设计)+ Mode(模式)。
  • 语法:document.designMode = 'on'; 或 'off';
  • 参数及说明:设置为 'on' 可以让整个页面变成可编辑状态,类似富文本编辑器。

例子:

// 开启整个页面的编辑模式
document.designMode = 'on'; // 现在用户可以直接在页面上打字修改内容

53. document.execCommand()

  • 含义:执行命令操作可编辑区域的内容(已废弃,但仍可用)。
  • 词源:Exec(执行)+ Command(命令)。
  • 语法:document.execCommand(command, showUI, value);
  • 参数及说明:
    • command:命令名称,如 'bold'、'italic'、'copy'、'paste'。
    • showUI:是否显示 UI,通常为 false。
    • value:命令需要的值,如插入链接时的 URL。

例子:

// 将选中文本加粗(需要先开启 designMode 或 contenteditable)
document.execCommand('bold', false, null);
// 复制选中的文本
document.execCommand('copy');
// 插入一个链接
document.execCommand('createLink', false, 'https://example.com');

第十部分:文档集合与特殊属性 (54-60)

54. document.styleSheets

  • 含义:返回包含文档中所有样式表对象的 StyleSheetList。
  • 词源:Style(样式)+ Sheets(工作表,复数)。
  • 语法:let sheets = document.styleSheets;
  • 参数及说明:可以访问页面中所有 CSS 样式表(包括内联、外链)。

例子:

console.log('页面有 ' + document.styleSheets.length + ' 个样式表');
// 查看第一个样式表的规则
let firstSheet = document.styleSheets[0];
console.log(firstSheet.cssRules); // 查看 CSS 规则

55. document.embeds

  • 含义:返回包含文档中所有 <embed> 元素的集合。
  • 词源:Embeds(嵌入元素,复数)。
  • 语法:let embeds = document.embeds;
  • 说明:类似于 document.plugins,用于访问嵌入的对象。

例子:

let flashCount = document.embeds.length; // 页面中 Flash 嵌入的数量

56. document.plugins

  • 含义:document.embeds 的别名。
  • 词源:Plugins(插件,复数)。
  • 语法:let plugins = document.plugins;
  • 说明:返回嵌入插件的集合。

例子:

console.log(document.plugins === document.embeds); // true

57. document.fonts

  • 含义:返回文档的 FontFaceSet 对象。
  • 词源:Fonts(字体,复数)。
  • 语法:let fonts = document.fonts;
  • 参数及说明:用于检查字体加载状态,等待字体加载完成等。

例子:

document.fonts.ready.then(function() {
    console.log('所有字体加载完成'); // 可以安全渲染文本了
});
console.log(document.fonts.status); // 字体加载状态

58. document.cookieEnabled

  • 含义:返回一个布尔值,表示浏览器是否启用了 cookie。
  • 词源:Cookie + Enabled(启用)。
  • 语法:let enabled = document.cookieEnabled;
  • 说明:只读属性,用于检测 Cookie 是否可用。

例子:

if (!document.cookieEnabled) {
    alert('请启用 Cookie 以获得完整体验');
}

59. document.currentScript

  • 含义:返回当前正在执行的 <script> 元素。
  • 词源:Current(当前的)+ Script(脚本)。
  • 语法:let script = document.currentScript;
  • 参数及说明:只能在脚本执行期间使用,用于获取当前脚本元素的信息。对于动态加载的脚本特别有用。

例子:

// 在 script.js 文件中
console.log(document.currentScript.src); // 输出当前脚本的 URL
console.log(document.currentScript.getAttribute('data-config')); // 获取自定义数据属性

60. document.fullscreenElement

  • 含义:返回当前以全屏模式显示的元素。
  • 词源:Fullscreen(全屏)+ Element(元素)。
  • 语法:let fullEl = document.fullscreenElement;
  • 参数及说明:如果没有元素在全屏模式,返回 null。

例子:

function toggleFullscreen() {
    if (document.fullscreenElement) {
        document.exitFullscreen(); // 退出全屏
    } else {
        document.documentElement.requestFullscreen(); // 整个文档全屏
    }
}

总结列表

下面对上面讲解的 JavaScript 的 document 对象 60 个常见的属性进行总结列表。

第一部分:文档元数据与位置 (1-5)
属性含义词源语法参数及说明
1document.title获取或设置当前文档的标题。'title'意为标题。let docTitle = document.title; document.title = "新标题";无参数。作为 Getter 时返回字符串,作为 Setter 时需传入新标题字符串。
2document.URL返回当前文档的完整 URL 地址。'URL' 是 Uniform Resource Locator(统一资源定位符)的缩写。let url = document.URL;只读属性,无参数。返回一个包含当前页面 URL 的字符串。
3document.domain获取或设置当前文档的域名,用于同源策略下的跨子域通信。'domain'意为域名。let domain = document.domain; document.domain = "example.com";可作为 Getter/Setter。通常只能设置为当前域名的父域(例如从 "sub.example.com" 设为 "example.com")。
4document.referrer返回链接到当前页面的前一页面的 URL。'referrer'意为引荐人、来源页面。let referringPage = document.referrer;只读属性。如果用户直接访问该页面(如通过书签),则返回空字符串。
5document.cookie获取或设置与当前文档相关联的所有 HTTP cookie。'cookie'在此指网络浏览器的数据存储机制。let cookies = document.cookie; document.cookie = "key=value; path=/";读取时返回包含所有 cookie 的字符串(以分号分隔)。写入时需设置键值对及可选属性(如 path、expires)。
第二部分:文档元素集合 (6-12)
属性含义词源语法参数及说明
6document.body返回当前文档的 <body> 元素。'body'指文档的主体部分。let bodyEl = document.body;只读属性。可以直接操作该元素,例如设置背景色。
7document.head返回当前文档的 <head> 元素。'head'指文档的头部区域。let headEl = document.head;只读属性。
8document.forms返回当前文档中所有 <form> 元素的集合(HTMLCollection)。'forms'是 form 的复数形式。let formsCollection = document.forms;只读属性。返回一个类数组对象,可以通过索引或表单的 name/id 访问。
9document.images返回当前文档中所有 <img> 元素的集合(HTMLCollection)。'images'是 image 的复数形式。let imagesCollection = document.images;只读属性。
10document.links返回当前文档中所有带有 href 属性的 <area> 元素和 <a> 元素的集合(HTMLCollection)。'links'是 link 的复数形式。let linksCollection = document.links;只读属性。
11document.anchors返回当前文档中所有带有 name 属性的 <a> 元素的集合(HTMLCollection)。'anchors'是 anchor(锚点)的复数形式。let anchorsCollection = document.anchors;只读属性。注意:现代 HTML 中通常使用 id 属性创建锚点,而非 name。
12document.scripts返回当前文档中所有 <script> 元素的集合(HTMLCollection)。'scripts'是 script 的复数形式。let scriptsCollection = document.scripts;只读属性。
第三部分:文档结构与视图 (13-17)
属性含义词源语法参数及说明
13document.doctype返回当前文档关联的文档类型声明(DTD)。'doctype'是 Document Type Declaration 的简称。let doctype = document.doctype;只读属性。返回一个 DocumentType 对象,如果没有则返回 null。
14document.documentElement返回文档的根元素(对于 HTML 文档,即 <html> 元素)。'documentElement'意为文档元素。let rootEl = document.documentElement;只读属性。这是获取根元素的标准方法。
15document.defaultView返回与当前文档关联的 window 对象。'defaultView'意为默认视图。let win = document.defaultView;只读属性。在浏览器中,通常等同于 window。
16document.activeElement返回当前文档中获得焦点的元素。'activeElement'意为激活中的元素。let activeEl = document.activeElement;只读属性。如果没有元素获得焦点,则返回 <body> 元素或 null。
17document.baseURI返回文档的绝对基础 URI,通常用于解析相对路径。'baseURI'是 Base Uniform Resource Identifier 的缩写。let baseUri = document.baseURI;只读属性。通常由 <base> 标签设置,否则默认为文档地址。
第四部分:编码与状态 (18-20)
属性含义词源语法参数及说明
18/19document.charset / document.characterSet返回文档使用的字符编码。'charset'是 Character Set 的缩写。let encoding = document.characterSet;只读属性。charset 是 characterSet 的别名,推荐使用后者。
20document.readyState返回当前文档的加载状态。'readyState'意为就绪状态。let state = document.readyState;只读属性。返回值有三种:loading(加载中)、interactive(DOM 解析完成)、complete(页面完全加载)。
第五部分:文件信息与遗留属性 (21-29)
属性含义词源语法参数及说明
21document.lastModified返回文档最后被修改的日期和时间(字符串形式)。'lastModified'意为最后修改时间。let modified = document.lastModified;只读属性。返回一个字符串,格式因服务器而异。
22-24document.fileCreatedDate / fileModifiedDate / fileSize(非标准,仅旧版 IE)分别表示文件的创建日期、修改日期和大小。-不建议使用。在现代浏览器中无效。无。
25document.bgColor获取或设置文档的背景颜色。'bgColor'是 Background Color 的缩写。document.bgColor = "red";已废弃,应使用 CSS 的 document.body.style.backgroundColor 替代。
26document.fgColor获取或设置文档的前景色(文本颜色)。'fgColor'是 Foreground Color 的缩写。document.fgColor = "black";已废弃,应使用 CSS 替代。
27-29document.linkColor / alinkColor / vlinkColor分别设置或获取链接、激活链接、已访问链接的颜色。'link'链接,'a'指 anchor,'v'指 visited。document.linkColor = "blue";已废弃,应使用 CSS 伪类(:link、:active、:visited)替代。
第六部分:集合与扩展 (30-32)
属性含义词源语法参数及说明
30document.all返回一个包含文档中所有元素的 HTMLAllCollection(非标准,仅 IE 支持)。'all'意为全部。let allEl = document.all;只读属性。非标准,不应在现代 Web 开发中使用。
31document.expando允许在 IE 中控制是否允许扩展文档的属性(非标准,仅 IE)。'expando'意为扩展属性。document.expando = false;非标准,仅 IE。用于性能优化,现已无用。
32document.location返回一个 Location 对象,包含文档 URL 的信息,并可用来导航。'location'意为位置。let loc = document.location; document.location.href = "newpage.html";既是只读属性(返回对象),也是可写属性(赋值字符串可导航到新页面)。与 window.location 基本相同。
第七部分:节点导航与关系属性 (33-40)
属性含义词源语法参数及说明
33document.firstChild返回文档的第一个子节点。'firstChild'意为第一个子节点。let first = document.firstChild;只读属性。注意:在 HTML 中,根节点 document 的第一个子节点通常是 <!DOCTYPE> 声明,但可能因空白节点而异。
34document.lastChild返回文档的最后一个子节点。'lastChild'意为最后一个子节点。let last = document.lastChild;只读属性。通常返回 <html> 元素。
35document.childNodes返回文档所有子节点的 NodeList 集合。'childNodes'意为子节点们。let children = document.childNodes;只读属性。通常包含 doctype 和 html 元素。
36document.firstElementChild返回文档的第一个子元素节点(忽略文本和注释节点)。'firstElementChild'意为第一个元素子节点。let firstEl = document.firstElementChild;只读属性。对于 HTML 文档,通常是 <html> 元素。
37document.lastElementChild返回文档的最后一个子元素节点。'lastElementChild'意为最后一个元素子节点。let lastEl = document.lastElementChild;只读属性。通常也是 <html> 元素。
38document.children返回文档所有子元素节点的 HTMLCollection 集合。'children'意为孩子们。let elChildren = document.children;只读属性。通常只包含 <html> 元素。
39document.nodeName返回文档节点的名称。'nodeName'意为节点名称。let name = document.nodeName;只读属性。对于 Document 节点,总是返回 #document。
40document.nodeType返回文档节点的类型。'nodeType'意为节点类型。let type = document.nodeType;只读属性。Document 节点的类型常量是 9。
第八部分:文档事件与处理程序 (41-46)
属性含义词源语法参数及说明
41document.onload页面加载完成时的事件处理程序(通常应使用 window.onload)。'onload'意为当加载时。document.onload = function() { ... };此事件通常在 <body> 或 <frameset> 上触发。更推荐使用 window.addEventListener('load', ...)。
42document.onreadystatechange当 document.readyState 属性发生变化时触发的事件处理程序。'onreadystatechange'意为当就绪状态改变时。document.onreadystatechange = function() { ... };用于监听文档加载过程。
43document.onscroll当文档滚动条滚动时触发的事件处理程序。'onscroll'意为当滚动时。document.onscroll = function() { ... };注意:滚动事件也可能发生在其他元素上。
44document.onclick当文档被点击时触发的事件处理程序。'onclick'意为当点击时。document.onclick = function(event) { ... };通过事件对象 event 可以获取点击位置、目标元素等。
45document.onkeydown当按键被按下时触发的事件处理程序。'onkeydown'意为当键按下时。document.onkeydown = function(event) { ... };常用于实现键盘快捷键。
46document.oncopy当用户复制元素内容时触发的事件处理程序。'oncopy'意为当复制时。document.oncopy = function(event) { ... };可以用于修改复制的内容或阻止复制。
第九部分:文档兼容性与视图 (47-53)
属性含义词源语法参数及说明
47document.compatMode返回文档的渲染模式是怪异模式还是标准模式。'compatMode'是 Compatibility Mode(兼容模式)的缩写。let mode = document.compatMode;只读属性。返回 "CSS1Compat"(标准模式)或 "BackCompat"(怪异模式)。
48document.documentURI返回文档的位置(URI)。'documentURI'是 Document Uniform Resource Identifier 的缩写。let uri = document.documentURI;只读属性。与 document.URL 类似,但 documentURI 对所有文档(包括 XML)都可用,且不可变。
49document.inputEncoding返回文档的字符编码。'inputEncoding'意为输入编码。let encoding = document.inputEncoding;只读属性。已废弃,应使用 document.characterSet。
50document.hidden返回一个布尔值,表示页面是否被认为隐藏。'hidden'意为隐藏的。let isHidden = document.hidden;只读属性。是 Page Visibility API 的一部分。
51document.visibilityState返回文档的可见性状态。'visibilityState'意为可见性状态。let state = document.visibilityState;只读属性。返回值:'visible'(页面可见)、'hidden'(页面隐藏)、'prerender'(预渲染)。
52document.designMode控制整个文档是否可编辑。'designMode'意为设计模式。document.designMode = "on"; document.designMode = "off";设置为 "on" 时,整个文档区域变为可编辑状态(类似富文本编辑器)。
53document.execCommand()在可编辑内容区域执行一个命令(如加粗、创建链接)。'execCommand'意为执行命令。document.execCommand('bold', false, null);参数:命令名、是否显示用户界面(通常为 false)、命令所需的值。
第十部分:文档集合与特殊属性 (54-60)
属性含义词源语法参数及说明
54document.styleSheets返回一个包含所有显式链接或嵌入到文档中的样式表对象的 StyleSheetList。'styleSheets'意为样式表们。let sheets = document.styleSheets;只读属性。可以用于动态操作 CSS 规则。
55document.embeds返回当前文档中所有 <embed> 元素的集合(HTMLCollection)。'embeds'是 embed 的复数形式。let embedsCollection = document.embeds;只读属性。用于获取页面中嵌入的插件内容。
56document.plugins返回一个包含所有已安装插件的 PluginArray。'plugins'是 plugin 的复数形式。let plugins = document.plugins;只读属性。通常用于检测特定插件是否存在(如 Flash)。
57document.fonts返回文档的 FontFaceSet 接口,用于检测和加载字体。'fonts'意为字体们。let fontSet = document.fonts;只读属性。是 CSS Font Loading API 的一部分。
58document.cookieEnabled返回一个布尔值,指示浏览器是否启用了 cookie。'cookieEnabled'意为 Cookie 已启用。let enabled = document.cookieEnabled;只读属性。用于检测用户的 Cookie 设置。
59document.currentScript返回当前正在执行的 <script> 元素。'currentScript'意为当前脚本。let curScript = document.currentScript;只读属性。对于内联脚本和外部脚本都有效,用于获取脚本自身的元数据。
60document.fullscreenElement返回当前正在以全屏模式显示的元素。'fullscreenElement'意为全屏元素。let fsEl = document.fullscreenElement;只读属性。如果没有元素处于全屏状态,则返回 null。

目录

  1. 第一部分:文档元数据与位置 (1-5)
  2. 1. document.title
  3. 2. document.URL
  4. 3. document.domain
  5. 4. document.referrer
  6. 5. document.cookie
  7. 第二部分:文档元素集合 (6-12)
  8. 6. document.body
  9. 7. document.head
  10. 8. document.forms
  11. 9. document.images
  12. 10. document.links
  13. 11. document.anchors
  14. 12. document.scripts
  15. 第三部分:文档结构与视图 (13-17)
  16. 13. document.doctype
  17. 14. document.documentElement
  18. 15. document.defaultView
  19. 16. document.activeElement
  20. 17. document.baseURI
  21. 第四部分:编码与状态 (18-20)
  22. 18. document.charset / 19. document.characterSet
  23. 20. document.readyState
  24. 第五部分:文件信息与遗留属性 (21-29)
  25. 21. document.lastModified
  26. 22. document.fileCreatedDate (非标准/IE)
  27. 23. document.fileModifiedDate (非标准/IE)
  28. 24. document.fileSize (非标准/IE)
  29. 25. document.bgColor
  30. 26. document.fgColor
  31. 27. document.linkColor
  32. 28. document.alinkColor
  33. 29. document.vlinkColor
  34. 第六部分:集合与扩展 (30-32)
  35. 30. document.all
  36. 31. document.expando
  37. 32. document.location
  38. 第七部分:节点导航与关系属性 (33-40)
  39. 33. document.firstChild
  40. 34. document.lastChild
  41. 35. document.childNodes
  42. 36. document.firstElementChild
  43. 37. document.lastElementChild
  44. 38. document.children
  45. 39. document.nodeName
  46. 40. document.nodeType
  47. 第八部分:文档事件与处理程序 (41-46)
  48. 41. document.onload
  49. 42. document.onreadystatechange
  50. 43. document.onscroll
  51. 44. document.onclick
  52. 45. document.onkeydown
  53. 46. document.oncopy
  54. 第九部分:文档兼容性与视图 (47-53)
  55. 47. document.compatMode
  56. 48. document.documentURI
  57. 49. document.inputEncoding
  58. 50. document.hidden
  59. 51. document.visibilityState
  60. 52. document.designMode
  61. 53. document.execCommand()
  62. 第十部分:文档集合与特殊属性 (54-60)
  63. 54. document.styleSheets
  64. 55. document.embeds
  65. 56. document.plugins
  66. 57. document.fonts
  67. 58. document.cookieEnabled
  68. 59. document.currentScript
  69. 60. document.fullscreenElement
  70. 总结列表
  71. 第一部分:文档元数据与位置 (1-5)
  72. 第二部分:文档元素集合 (6-12)
  73. 第三部分:文档结构与视图 (13-17)
  74. 第四部分:编码与状态 (18-20)
  75. 第五部分:文件信息与遗留属性 (21-29)
  76. 第六部分:集合与扩展 (30-32)
  77. 第七部分:节点导航与关系属性 (33-40)
  78. 第八部分:文档事件与处理程序 (41-46)
  79. 第九部分:文档兼容性与视图 (47-53)
  80. 第十部分:文档集合与特殊属性 (54-60)
  • 💰 8折买阿里云服务器限时8折了解详情
  • GPT-5.5 超高智商模型1元抵1刀ChatGPT中转购买
  • 代充Chatgpt Plus/pro 帐号了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

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

更多推荐文章

查看全部
  • Android 开发高效学习指南:从基础到架构的八大进阶模块
  • 开源 LLaVA-o1:基于自主多阶段推理的视觉语言模型解析
  • Go 语言实现 Doomsday 末日算法
  • SpringBoot 整合 Flink CDC 实时追踪 MySQL 数据变动
  • 网络安全十大热门岗位详解与职业发展路径分析
  • 2026 年 AI 编程工具全景评测与选型指南
  • LLM Agent 中 RAG 与模型智能的平衡:幻觉检测与校准方案
  • 基于官方 API 搭建 QQ 群聊机器人实战指南
  • Git 核心原理与基础操作详解 (上)
  • Qwen3-32B 开源部署实践:Clawdbot Web 网关 + 企微/钉钉集成
  • 大模型学习路径(一):人工智能与大模型基础概述
  • 大模型预训练 PT 与有监督微调 SFT 原理详解
  • 大模型时代对普通人生活与工作的影响及学习路径
  • 基于 Higress 将 REST API 转换为 MCP Server 工具
  • 2023 电赛 H 题信号分离装置 FPGA 与 STM32 实现方案
  • 大规模数据处理算法性能瓶颈优化方案
  • 注意力机制与 Transformer 模型实战
  • 循环神经网络(RNN)与序列数据处理实战
  • SpringAI Agent 开发实战:利用 Skills 构建代码评审工具
  • FPGA 实现 OV5640 摄像头视频图像显示

相关免费在线工具

  • 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