JavaScript 中 Document 对象常见属性分析

JavaScript 中 Document 对象常见属性分析 | 极客日志

document.getElementById

document.querySelector

document.title

document.cookie

forms

images

links

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

// 假设当前地址是 https://example.com/page?id=1#section
console.log(document.URL); // 输出：https://example.com/page?id=1#section
// document.URL = "新地址"； // 这样做是无效的，它不可写

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	属性	含义	词源	语法	参数及说明
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	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	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/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	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	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	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	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	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	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 对象常见属性分析

第一部分：文档元数据与位置 (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)

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