JavaScript中Document对象常见的的属性分析实例详解

更新时间：2026年03月07日 09:42:04 作者：长城2024

JavaScript中的Document对象是网页开发的核心接口,为开发者提供了操作HTML文档的桥梁,它包含丰富的属性和方法,本文给大家介绍JavaScript中Document对象常见的的属性分析,感兴趣的朋友跟随小编一起看看吧

第一部分：文档元数据与位置 (1-5)
第二部分：文档元素集合 (6-12)
第三部分：文档结构与视图 (13-17)
第四部分：编码与状态 (18-20)
第五部分：文件信息与遗留属性 (21-29)
第六部分：集合与扩展 (30-32)
第七部分：节点导航与关系属性 (33-40)
第八部分：文档事件与处理程序 (41-46)
第九部分：文档兼容性与视图 (47-53)
第十部分：文档集合与特殊属性 (54-60)

总结列表

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)

	属性	含义	词源	语法	参数及说明
1	document.title	获取或设置当前文档的标题。	“title”意为标题。	`let docTitle = document.title;` `document.title = "新标题";`	无参数。作为 Getter 时返回字符串，作为 Setter 时需传入新标题字符串。
2	document.URL	返回当前文档的完整 URL 地址。	“URL” 是 Uniform Resource Locator（统一资源定位符）的缩写。	`let url = document.URL;`	只读属性，无参数。返回一个包含当前页面 URL 的字符串。
3	document.domain	获取或设置当前文档的域名，用于同源策略下的跨子域通信。	“domain”意为域名。	`let domain = document.domain;` `document.domain = "example.com";`	可作为 Getter/Setter。通常只能设置为当前域名的父域（例如从 "sub.example.com" 设为 "example.com"）。
4	document.referrer	返回链接到当前页面的前一页面的 URL。	“referrer”意为引荐人、来源页面。	`let referringPage = document.referrer;`	只读属性。如果用户直接访问该页面（如通过书签），则返回空字符串。
5	document.cookie	获取或设置与当前文档相关联的所有 HTTP cookie。	“cookie”在此指网络浏览器的数据存储机制。	`let cookies = document.cookie;` `document.cookie = "key=value; path=/";`	读取时返回包含所有 cookie 的字符串（以分号分隔）。写入时需设置键值对及可选属性（如 `path`、`expires`）。

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

	属性	含义	词源	语法	参数及说明
6	document.body	返回当前文档的 `<body>` 元素。	“body”指文档的主体部分。	`let bodyEl = document.body;`	只读属性。可以直接操作该元素，例如设置背景色。
7	document.head	返回当前文档的 `<head>` 元素。	“head”指文档的头部区域。	`let headEl = document.head;`	只读属性。
8	document.forms	返回当前文档中所有 `<form>` 元素的集合（HTMLCollection）。	“forms”是 form 的复数形式。	`let formsCollection = document.forms;`	只读属性。返回一个类数组对象，可以通过索引或表单的 name/id 访问。
9	document.images	返回当前文档中所有 `<img>` 元素的集合（HTMLCollection）。	“images”是 image 的复数形式。	`let imagesCollection = document.images;`	只读属性。
10	document.links	返回当前文档中所有带有 `href` 属性的 `<area>` 元素和 `<a>` 元素的集合（HTMLCollection）。	“links”是 link 的复数形式。	`let linksCollection = document.links;`	只读属性。
11	document.anchors	返回当前文档中所有带有 `name` 属性的 `<a>` 元素的集合（HTMLCollection）。	“anchors”是 anchor（锚点）的复数形式。	`let anchorsCollection = document.anchors;`	只读属性。注意：现代 HTML 中通常使用 `id` 属性创建锚点，而非 `name`。
12	document.scripts	返回当前文档中所有 `<script>` 元素的集合（HTMLCollection）。	“scripts”是 script 的复数形式。	`let scriptsCollection = document.scripts;`	只读属性。

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

	属性	含义	词源	语法	参数及说明
13	document.doctype	返回当前文档关联的文档类型声明（DTD）。	“doctype”是 Document Type Declaration 的简称。	`let doctype = document.doctype;`	只读属性。返回一个 DocumentType 对象，如果没有则返回 `null`。
14	document.documentElement	返回文档的根元素（对于 HTML 文档，即 `<html>` 元素）。	“documentElement”意为文档元素。	`let rootEl = document.documentElement;`	只读属性。这是获取根元素的标准方法。
15	document.defaultView	返回与当前文档关联的 window 对象。	“defaultView”意为默认视图。	`let win = document.defaultView;`	只读属性。在浏览器中，通常等同于 `window`。
16	document.activeElement	返回当前文档中获得焦点的元素。	“activeElement”意为激活中的元素。	`let activeEl = document.activeElement;`	只读属性。如果没有元素获得焦点，则返回 `<body>` 元素或 `null`。
17	document.baseURI	返回文档的绝对基础 URI，通常用于解析相对路径。	“baseURI”是 Base Uniform Resource Identifier 的缩写。	`let baseUri = document.baseURI;`	只读属性。通常由 `<base>` 标签设置，否则默认为文档地址。

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

	属性	含义	词源	语法	参数及说明
18/19	document.charset / document.characterSet	返回文档使用的字符编码。	“charset”是 Character Set 的缩写。	`let encoding = document.characterSet;`	只读属性。`charset` 是 `characterSet` 的别名，推荐使用后者。
20	document.readyState	返回当前文档的加载状态。	“readyState”意为就绪状态。	`let state = document.readyState;`	只读属性。返回值有三种：`loading`（加载中）、`interactive`（DOM 解析完成）、`complete`（页面完全加载）。

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

	属性	含义	词源	语法	参数及说明
21	document.lastModified	返回文档最后被修改的日期和时间（字符串形式）。	“lastModified”意为最后修改时间。	`let modified = document.lastModified;`	只读属性。返回一个字符串，格式因服务器而异。
22-24	document.fileCreatedDate / fileModifiedDate / fileSize	（非标准，仅旧版 IE）分别表示文件的创建日期、修改日期和大小。	-	不建议使用。在现代浏览器中无效。	无。
25	document.bgColor	获取或设置文档的背景颜色。	“bgColor”是 Background Color 的缩写。	`document.bgColor = "red";`	已废弃，应使用 CSS 的 `document.body.style.backgroundColor` 替代。
26	document.fgColor	获取或设置文档的前景色（文本颜色）。	“fgColor”是 Foreground Color 的缩写。	`document.fgColor = "black";`	已废弃，应使用 CSS 替代。
27-29	document.linkColor / alinkColor / vlinkColor	分别设置或获取链接、激活链接、已访问链接的颜色。	“link”链接，“a”指 anchor，“v”指 visited。	`document.linkColor = "blue";`	已废弃，应使用 CSS 伪类（`:link`、`:active`、`:visited`）替代。

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

	属性	含义	词源	语法	参数及说明
30	document.all	返回一个包含文档中所有元素的 HTMLAllCollection（非标准，仅 IE 支持）。	“all”意为全部。	`let allEl = document.all;`	只读属性。非标准，不应在现代 Web 开发中使用。
31	document.expando	允许在 IE 中控制是否允许扩展文档的属性（非标准，仅 IE）。	“expando”意为扩展属性。	`document.expando = false;`	非标准，仅 IE。用于性能优化，现已无用。
32	document.location	返回一个 Location 对象，包含文档 URL 的信息，并可用来导航。	“location”意为位置。	`let loc = document.location;` `document.location.href = "newpage.html";`	既是只读属性（返回对象），也是可写属性（赋值字符串可导航到新页面）。与 `window.location` 基本相同。

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

	属性	含义	词源	语法	参数及说明
33	document.firstChild	返回文档的第一个子节点。	“firstChild”意为第一个子节点。	`let first = document.firstChild;`	只读属性。注意：在 HTML 中，根节点 `document` 的第一个子节点通常是 `<!DOCTYPE>` 声明，但可能因空白节点而异。
34	document.lastChild	返回文档的最后一个子节点。	“lastChild”意为最后一个子节点。	`let last = document.lastChild;`	只读属性。通常返回 `<html>` 元素。
35	document.childNodes	返回文档所有子节点的 NodeList 集合。	“childNodes”意为子节点们。	`let children = document.childNodes;`	只读属性。通常包含 doctype 和 html 元素。
36	document.firstElementChild	返回文档的第一个子元素节点（忽略文本和注释节点）。	“firstElementChild”意为第一个元素子节点。	`let firstEl = document.firstElementChild;`	只读属性。对于 HTML 文档，通常是 `<html>` 元素。
37	document.lastElementChild	返回文档的最后一个子元素节点。	“lastElementChild”意为最后一个元素子节点。	`let lastEl = document.lastElementChild;`	只读属性。通常也是 `<html>` 元素。
38	document.children	返回文档所有子元素节点的 HTMLCollection 集合。	“children”意为孩子们。	`let elChildren = document.children;`	只读属性。通常只包含 `<html>` 元素。
39	document.nodeName	返回文档节点的名称。	“nodeName”意为节点名称。	`let name = document.nodeName;`	只读属性。对于 Document 节点，总是返回 `#document`。
40	document.nodeType	返回文档节点的类型。	“nodeType”意为节点类型。	`let type = document.nodeType;`	只读属性。Document 节点的类型常量是 9。

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

	属性	含义	词源	语法	参数及说明
41	document.onload	页面加载完成时的事件处理程序（通常应使用 `window.onload`）。	“onload”意为当加载时。	`document.onload = function() { ... };`	此事件通常在 `<body>` 或 `<frameset>` 上触发。更推荐使用 `window.addEventListener('load', ...)`。
42	document.onreadystatechange	当 `document.readyState` 属性发生变化时触发的事件处理程序。	“onreadystatechange”意为当就绪状态改变时。	`document.onreadystatechange = function() { ... };`	用于监听文档加载过程。
43	document.onscroll	当文档滚动条滚动时触发的事件处理程序。	“onscroll”意为当滚动时。	`document.onscroll = function() { ... };`	注意：滚动事件也可能发生在其他元素上。
44	document.onclick	当文档被点击时触发的事件处理程序。	“onclick”意为当点击时。	`document.onclick = function(event) { ... };`	通过事件对象 `event` 可以获取点击位置、目标元素等。
45	document.onkeydown	当按键被按下时触发的事件处理程序。	“onkeydown”意为当键按下时。	`document.onkeydown = function(event) { ... };`	常用于实现键盘快捷键。
46	document.oncopy	当用户复制元素内容时触发的事件处理程序。	“oncopy”意为当复制时。	`document.oncopy = function(event) { ... };`	可以用于修改复制的内容或阻止复制。

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

	属性	含义	词源	语法	参数及说明
47	document.compatMode	返回文档的渲染模式是怪异模式还是标准模式。	“compatMode”是 Compatibility Mode（兼容模式）的缩写。	`let mode = document.compatMode;`	只读属性。返回 `"CSS1Compat"`（标准模式）或 `"BackCompat"`（怪异模式）。
48	document.documentURI	返回文档的位置（URI）。	“documentURI”是 Document Uniform Resource Identifier 的缩写。	`let uri = document.documentURI;`	只读属性。与 `document.URL` 类似，但 `documentURI` 对所有文档（包括 XML）都可用，且不可变。
49	document.inputEncoding	返回文档的字符编码。	“inputEncoding”意为输入编码。	`let encoding = document.inputEncoding;`	只读属性。已废弃，应使用 `document.characterSet`。
50	document.hidden	返回一个布尔值，表示页面是否被认为隐藏。	“hidden”意为隐藏的。	`let isHidden = document.hidden;`	只读属性。是 Page Visibility API 的一部分。
51	document.visibilityState	返回文档的可见性状态。	“visibilityState”意为可见性状态。	`let state = document.visibilityState;`	只读属性。返回值：`'visible'`（页面可见）、`'hidden'`（页面隐藏）、`'prerender'`（预渲染）。
52	document.designMode	控制整个文档是否可编辑。	“designMode”意为设计模式。	`document.designMode = "on";` `document.designMode = "off";`	设置为 `"on"` 时，整个文档区域变为可编辑状态（类似富文本编辑器）。
53	document.execCommand()	在可编辑内容区域执行一个命令（如加粗、创建链接）。	“execCommand”意为执行命令。	`document.execCommand('bold', false, null);`	参数：命令名、是否显示用户界面（通常为 false）、命令所需的值。

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

	属性	含义	词源	语法	参数及说明
54	document.styleSheets	返回一个包含所有显式链接或嵌入到文档中的样式表对象的 StyleSheetList。	“styleSheets”意为样式表们。	let sheets = document.styleSheets;	只读属性。可以用于动态操作 CSS 规则。
55	document.embeds	返回当前文档中所有 <embed> 元素的集合（HTMLCollection）。	“embeds”是 embed 的复数形式。	let embedsCollection = document.embeds;	只读属性。用于获取页面中嵌入的插件内容。
56	document.plugins	返回一个包含所有已安装插件的 PluginArray。	“plugins”是 plugin 的复数形式。	let plugins = document.plugins;	只读属性。通常用于检测特定插件是否存在（如 Flash）。
57	document.fonts	返回文档的 FontFaceSet 接口，用于检测和加载字体。	“fonts”意为字体们。	let fontSet = document.fonts;	只读属性。是 CSS Font Loading API 的一部分。
58	document.cookieEnabled	返回一个布尔值，指示浏览器是否启用了 cookie。	“cookieEnabled”意为 Cookie 已启用。	let enabled = document.cookieEnabled;	只读属性。用于检测用户的 Cookie 设置。
59	document.currentScript	返回当前正在执行的 <script> 元素。	“currentScript”意为当前脚本。	let curScript = document.currentScript;	只读属性。对于内联脚本和外部脚本都有效，用于获取脚本自身的元数据。
60	document.fullscreenElement	返回当前正在以全屏模式显示的元素。	“fullscreenElement”意为全屏元素。	let fsEl = document.fullscreenElement;	只读属性。如果没有元素处于全屏状态，则返回 null。

到此这篇关于JavaScript中Document对象常见的的属性分析的文章就介绍到这了,更多相关js document对象属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js移动端事件基础及常用事件库详解
这篇文章主要为大家详细介绍了js移动端事件基础及常用事件库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
JavaScript实现的DOM绘制柱状图效果示例
这篇文章主要介绍了JavaScript实现的DOM绘制柱状图效果,涉及javascript数值计算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-08-08
JavaScript蒙板(model)功能的简单实现代码
本文给大家介绍JavaScript蒙板(model)功能的简单实现代码，创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住，感兴趣的朋友可以参考下实现代码
2016-08-08
three.js 如何制作魔方
这篇文章主要介绍了three.js 如何制作魔方，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
在线编辑器的实现原理(兼容IE和FireFox)
在线编辑器的实现原理(兼容IE和FireFox)...
2007-03-03
JavaScript是否可实现多线程深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感,
2009-12-12
JavaScript实现获取指定音视频流链接的时长
这篇文章主要为大家详细介绍了JavaScript实现获取指定音频或视频流链接的时长,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2026-02-02
如何使用JavaScript获取word的内容
这篇文章主要为大家详细介绍了如何使用JavaScript获取word的内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-02-02
Javascript 中创建自定义对象的方法汇总
这篇文章主要汇总介绍了Javascript 中创建自定义对象的方法,需要的朋友可以参考下
2014-12-12
JavaScript数组去重的方法总结【12种方法，号称史上最全】
这篇文章主要介绍了JavaScript数组去重的方法,结合实例形式较为详细的总结分析了12种方法数组去重的方法,需要的朋友可以参考下
2019-02-02

JavaScript中Document对象常见的的属性分析实例详解

目录

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

1、document.title

2、document.URL

3、document.domain

4、document.referrer

5、document.cookie

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

6、document.body

7、document.head

8、document.forms

9、document.images

10、document.links

11、document.anchors

12、document.scripts

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

13、document.doctype

14、document.documentElement

15、document.defaultView

16、document.activeElement

17、document.baseURI

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

18、document.charset / 19、document.characterSet

20、document.readyState

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

21、document.lastModified

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

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

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

25、document.bgColor

26、document.fgColor

27、document.linkColor

28、document.alinkColor

29、document.vlinkColor

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

30、document.all

31、document.expando

32、document.location

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

33、document.firstChild

34、document.lastChild

35、document.childNodes

36、document.firstElementChild

37、document.lastElementChild

38、document.children

39、document.nodeName

40、document.nodeType

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

41、document.onload

42、document.onreadystatechange

43、document.onscroll

44、document.onclick

45、document.onkeydown

46、document.oncopy

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

47、document.compatMode

48、document.documentURI

49、document.inputEncoding

50、document.hidden

51、document.visibilityState

52、document.designMode

53、document.execCommand()

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

54、document.styleSheets

55、document.embeds

56、document.plugins

57、document.fonts

58、document.cookieEnabled

59、document.currentScript

60、document.fullscreenElement

总 结 列 表

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

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

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

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

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

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

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

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

总结列表