跳到主要内容
JavaScript 文档对象核心属性实战指南 | 极客日志
JavaScript 大前端
JavaScript 文档对象核心属性实战指南 JavaScript 文档对象是 DOM 操作的核心入口，涵盖元数据、元素集合、节点导航及事件处理等关键属性。本文详细解析了 title、URL、body、location 等常用属性的用法与注意事项，同时指出了如 bgColor、anchors 等已废弃或浏览器兼容性较差的遗留特性。通过对比标准与现代实践，帮助开发者编写更安全、高效的页面交互代码。
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 与网页内容的核心枢纽。
接下来，咱们就深入聊聊 Document 对象里那些最常用的属性，按功能分几个板块来梳理。
第一部分：文档元数据与位置
document.title
含义 ：获取或设置当前文档的标题，也就是显示在浏览器标签页上的文字。词源 ：Title 在英文中意为'标题、名称'。语法 ：
获取：let pageTitle = document.title;
设置：document.title = '新标题';
参数及说明 ：它是一个字符串。设置时会覆盖 HTML 中 <title> 标签的内容，但不会修改 DOM 树中的实际节点值（只是同步了显示）。
例子 ：
console .log (document .title );
document .title = "欢迎光临我的网站" ;
document.URL
含义 ：返回当前文档的完整 URL 地址（只读）。词源 ：Uniform Resource Locator（统一资源定位器）的缩写。语法 ：let currentUrl = document.URL;参数及说明 ：它是一个只读字符串，包含协议、主机、端口、路径、查询参数和哈希。
例子 ：
console .log (document
URL
document.domain
含义 ：获取或设置当前文档的域名。词源 ：Domain（域名）。语法 ：let currentDomain = document.domain; 或 document.domain = 'example.com';参数及说明 ：它是一个字符串。主要用于同源策略的限制 。在二级域名不同的跨子域通信中（如 a.example.com 和 b.example.com），可以将两边都设置为 example.com 来实现通信。现在该属性在现代浏览器中为了安全已被严格限制（通常只能设为更高级别的相同后缀，且不能设置为顶级域名）。 console .log (document .domain );
document.referrer
含义 ：返回链接到当前页面的那个页面的 URL（即来源页面地址，只读）。词源 ：Referrer（引荐人，来源）。语法 ：let referringPage = document.referrer;参数及说明 ：它是一个字符串。如果是直接打开页面（如输入网址或书签），则返回空字符串 ""。
console .log (document .referrer );
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 );
document .cookie = "language=zh-CN; path=/" ;
第二部分：文档元素集合
document.body
含义 ：返回当前文档的 <body> 元素。词源 ：Body（身体、主体）。语法 ：let bodyElement = document.body;参数及说明 ：它是一个 HTMLBodyElement 对象。如果是框架集（Frameset）页面，可能返回 <frameset> 元素。 document .body .style .backgroundColor = 'lightblue' ;
document.head
含义 ：返回当前文档的 <head> 元素。词源 ：Head（头部）。语法 ：let headElement = document.head;参数及说明 ：它是一个 HTMLHeadElement 对象。 console .log (document .head .innerHTML );
document.forms
含义 ：返回包含当前文档中所有 <form> 元素的集合（HTMLCollection）。词源 ：Forms（表单，复数）。语法 ：let formCollection = document.forms;参数及说明 ：可以通过索引（[0]）或表单的 name 属性（["formName"]）访问具体的表单。 let firstForm = document .forms [0 ];
let loginForm = document .forms ['loginForm' ];
document.images
含义 ：返回包含当前文档中所有 <img> 元素的集合（HTMLCollection）。词源 ：Images（图像，复数）。语法 ：let imageCollection = document.images;参数及说明 ：常用于遍历所有图片，统计数量或懒加载。 console .log (document .images .length );
for (let img of document .images ) {
console .log (img.src );
}
document.links
含义 ：返回包含当前文档中所有带有 href 属性的 <a> 和 <area> 元素的集合。词源 ：Links（链接，复数）。语法 ：let linkCollection = document.links;参数及说明 ：只包含有具体地址的链接锚点。 document .links [0 ].href = 'https://newsite.com' ;
document.anchors
含义 ：返回包含当前文档中所有带有 name 属性的 <a> 元素的集合。词源 ：Anchors（锚点，复数）。参数及说明 ：在现代 HTML5 中，name 属性在 <a> 上已不推荐使用，通常用 id 代替，因此这个集合在现代页面中可能为空。
console .log (document .anchors ['section1' ]);
document.scripts
含义 ：返回包含当前文档中所有 <script> 元素的集合。词源 ：Scripts（脚本，复数）。语法 ：let scriptCollection = document.scripts;参数及说明 ：常用于动态分析页面加载了哪些脚本。 console .log ('页面加载了 ' + document .scripts .length + ' 个 JS 文件' );
第三部分：文档结构与视图
document.doctype
含义 ：返回当前文档的文档类型声明（Document Type Declaration，即 <!DOCTYPE html>）。词源 ：Doc（Document 缩写）+ Type（类型）。语法 ：let doctype = document.doctype;参数及说明 ：返回一个 DocumentType 对象，如果没有声明则返回 null。 console .log (document .doctype .name );
document.documentElement
含义 ：返回当前文档的根元素，即 <html> 标签。词源 ：Document（文档）+ Element（元素）。语法 ：let htmlElement = document.documentElement;参数及说明 ：这是获取整个 HTML 文档根节点的标准方法。常用于获取视口高度等。 let fullPageHeight = document .documentElement .scrollHeight ;
document.defaultView
含义 ：返回当前文档所关联的 window 对象。词源 ：Default（默认）+ View（视图）。语法 ：let win = document.defaultView;参数及说明 ：在浏览器中，这通常等价于 window 对象。在 iframe 中，可以用来获取 iframe 内部的全局对象。 let isChrome = document .defaultView .navigator .userAgent .includes ('Chrome' );
document.activeElement
含义 ：返回当前文档中获得焦点（被选中、正在输入）的元素。词源 ：Active（活跃的）+ Element（元素）。语法 ：let activeEl = document.activeElement;参数及说明 ：常用于表单验证或 UI 状态判断。默认情况下，如果没有任何焦点，body 元素可能被返回。 if (document .activeElement .id === 'username' ) {
console .log ('用户正在输入用户名' );
}
document.baseURI
含义 ：返回文档的绝对基础 URL（只读）。词源 ：Base（基础）+ URI（统一资源标识符）。语法 ：let baseUri = document.baseURI;参数及说明 ：通常由页面 URL 和 <base> 标签决定。如果没有 <base> 标签，它等同于 document.URL。
console .log (document .baseURI );
第四部分：编码与状态
document.charset / document.characterSet
含义 ：返回文档使用的字符编码（如 "UTF-8", "GB2312"）。词源 ：Character Set（字符集）。语法 ：let encoding = document.characterSet;参数及说明 ：这两个属性通常返回相同的值，characterSet 是标准属性。 console .log (document .characterSet );
document.readyState
含义 ：返回当前文档的加载状态。词源 ：Ready（准备就绪）+ State（状态）。语法 ：let state = document.readyState;参数及说明 ：有三个可能的值：
loading：正在加载。interactive：文档解析完成，但图片、样式等仍在加载。complete：文档和所有子资源加载完成。
if (document .readyState === 'complete' ) {
console .log ('页面完全加载好了' );
}
第五部分：文件信息与遗留属性 *注意：fileCreatedDate, fileModifiedDate, fileSize 这些属性是非标准 的，主要出现在旧版 IE 中，现代浏览器不支持或返回空值。
document.lastModified
含义 ：返回文档最后修改的日期和时间字符串。词源 ：Last（最后）+ Modified（修改）。语法 ：let modDate = document.lastModified;参数及说明 ：返回字符串格式如 "12/25/2024 14:35:00"。 console .log ('本页面最后更新于：' + document .lastModified );
document.fileCreatedDate (非标准/IE)
含义 ：在旧版 IE 中，尝试返回文件的创建日期。词源 ：File（文件）+ Created（创建）+ Date（日期）。语法 ：let createDate = document.fileCreatedDate;说明 ：现代浏览器中无此属性，会返回 undefined。
document.fileModifiedDate (非标准/IE)
含义 ：同 lastModified，旧版 IE 的另一别名。词源 ：File（文件）+ Modified（修改）+ Date（日期）。
document.fileSize (非标准/IE)
含义 ：在旧版 IE 中，返回文档的大小（字节数）。词源 ：File（文件）+ Size（大小）。
document.bgColor
含义 ：获取或设置文档的背景颜色（已废弃 ）。词源 ：Background（背景）+ Color（颜色）。语法 ：document.bgColor = "#FF0000";说明 ：这是一个非常老的属性，来自 DOM Level 0。现在应使用 document.body.style.backgroundColor 代替。 document .bgColor = "yellow" ;
document.fgColor
含义 ：获取或设置文档的前景色（文本颜色，已废弃 ）。词源 ：Foreground（前景）+ Color（颜色）。语法 ：document.fgColor = "black";说明 ：现在应使用 CSS 的 color 属性。
document.linkColor
含义 ：获取或设置文档中未访问链接的颜色（<a>, 已废弃 ）。词源 ：Link（链接）+ Color（颜色）。说明 ：对应 CSS 的 :link 伪类。现在应使用 CSS 控制。
document.alinkColor
含义 ：获取或设置激活链接（鼠标按下瞬间）的颜色（已废弃 ）。词源 ：Active Link（激活的链接）+ Color（颜色）。说明 ：对应 CSS 的 :active 伪类。
document.vlinkColor
含义 ：获取或设置已访问过链接的颜色（已废弃 ）。词源 ：Visited Link（已访问链接）+ Color（颜色）。说明 ：对应 CSS 的 :visited 伪类。
第六部分：集合与扩展
document.all
含义 ：返回一个包含文档中所有 HTML 元素的集合（HTMLAllCollection）。词源 ：All（所有）。语法 ：let allElements = document.all;参数及说明 ：这是一个非标准但曾被广泛支持 的属性（源自 IE）。现代浏览器为了兼容性保留了它，但建议使用 document.querySelectorAll('*') 代替。它是一个类数组对象，同时也是一个 falsy 值，常用于检测浏览器是否为 IE。
let element = document .all [4 ];
if (document .all ) {
}
document.expando
含义 ：一个旧版 IE 属性，允许或禁止在 DOM 对象上扩展自定义属性。词源 ：Expando（扩展属性，源自 'expand'）。语法 ：document.expando = false;参数及说明 ：如果设置为 false，则不能给 DOM 元素添加自定义属性。现代浏览器无此限制。
document .expando = false ;
document .body .myCustomProp = "test" ;
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 );
setTimeout (() => {
document .location = 'https://www.baidu.com' ;
}, 3000 );
第七部分：节点导航与关系属性
document.firstChild
含义 ：返回文档节点的第一个子节点。词源 ：First（第一个）+ Child（孩子）。语法 ：let first = document.firstChild;参数及说明 ：对于 HTML 文档，通常第一个子节点可能是 <!DOCTYPE> 声明或空白文本节点（换行符）。返回的是 Node 类型，不一定是元素节点。 console .log (document .firstChild .nodeName );
document.lastChild
含义 ：返回文档节点的最后一个子节点。词源 ：Last（最后一个）+ Child（孩子）。语法 ：let last = document.lastChild;参数及说明 ：通常最后一个子节点是 <html> 元素。 console .log (document .lastChild .nodeName );
document.childNodes
含义 ：返回包含文档节点所有子节点的 NodeList。词源 ：Child（孩子）+ Nodes（节点，复数）。语法 ：let children = document.childNodes;参数及说明 ：这是一个类数组对象，包含文档类型声明和根元素。不会递归获取所有后代节点，只获取直接子节点。 for (let node of document .childNodes ) {
console .log (node.nodeType , node.nodeName );
}
document.firstElementChild
含义 ：返回文档节点的第一个元素 子节点（忽略文本和注释）。词源 ：First（第一个）+ Element（元素）+ Child（孩子）。语法 ：let firstEl = document.firstElementChild;参数及说明 ：对于 HTML 文档，这通常是 <html> 元素。只考虑元素节点，忽略空白和 DOCTYPE。 console .log (document .firstElementChild .tagName );
document.lastElementChild
含义 ：返回文档节点的最后一个元素 子节点。词源 ：Last（最后一个）+ Element（元素）+ Child（孩子）。语法 ：let lastEl = document.lastElementChild;说明 ：通常也是 <html> 元素，因为通常只有一个根元素。 console .log (document .lastElementChild === document .documentElement );
document.children
含义 ：返回包含文档节点所有元素 子节点的 HTMLCollection。词源 ：Children（孩子们，复数）。语法 ：let elementChildren = document.children;参数及说明 ：只包含元素节点，不包含 DOCTYPE 或文本节点。通常只有一个元素：<html>。 console .log (document .children .length );
console .log (document .children [0 ].tagName );
document.nodeName
含义 ：返回文档节点的名称。词源 ：Node（节点）+ Name（名称）。语法 ：let name = document.nodeName;参数及说明 ：对于 Document 节点，总是返回 "#document"。 console .log (document .nodeName );
document.nodeType
含义 ：返回文档节点的类型编号。词源 ：Node（节点）+ Type（类型）。语法 ：let type = document.nodeType;参数及说明 ：Document 节点的类型是 9。
1：元素节点
3：文本节点
8：注释节点
9：文档节点
console .log (document .nodeType );
第八部分：文档事件与处理程序
document.onload
含义 ：文档加载完成时触发的事件处理程序。词源 ：On（当...时）+ Load（加载）。语法 ：document.onload = function() { ... };参数及说明 ：通常更常用的是 window.onload 或 DOMContentLoaded。document.onload 不如 window.onload 支持广泛。 document .onload = function (console .log ('文档加载完成' );
};
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 ('页面完全加载完成' );
}
};
document.onscroll
含义 ：当文档滚动时触发的事件处理程序。词源 ：On（当...时）+ Scroll（滚动）。语法 ：document.onscroll = function() { ... };参数及说明 ：也可以添加到 window 对象上。监听整个页面的滚动事件。 document .onscroll = function (console .log ('滚动位置：' + window .scrollY );
};
document.onclick
含义 ：当文档被点击时触发的事件处理程序。词源 ：On（当...时）+ Click（点击）。语法 ：document.onclick = function(event) { ... };参数及说明 ：事件对象包含点击位置、目标元素等信息。 document .onclick = function (e ) {
console .log ('点击了：' + e.target .tagName );
console .log ('坐标：' + e.clientX + ', ' + e.clientY );
};
document.onkeydown
含义 ：当键盘按键被按下时触发的事件处理程序。词源 ：On（当...时）+ Key（键）+ Down（向下/按下）。语法 ：document.onkeydown = function(event) { ... };参数及说明 ：事件对象包含按下的键码、是否按了 Ctrl 等信息。 document .onkeydown = function (e ) {
if (e.key === 'Escape' ) {
console .log ('按下了 ESC 键' );
closeModal ();
}
};
document.oncopy
含义 ：当用户复制文档内容时触发的事件处理程序。词源 ：On（当...时）+ Copy（复制）。语法 ：document.oncopy = function(event) { ... };参数及说明 ：可以用于修改复制的内容，或者阻止复制。 document .oncopy = function (e ) {
alert ('内容已复制！' );
e.clipboardData .setData ('text/plain' , '复制的内容被修改了' );
e.preventDefault ();
};
第九部分：文档兼容性与视图
document.compatMode
含义 ：返回文档的渲染模式，是怪异模式还是标准模式。词源 ：Compat（兼容性）+ Mode（模式）。语法 ：let mode = document.compatMode;参数及说明 ：返回两个值之一：
'CSS1Compat'：标准模式（严格模式）'BackCompat'：怪异模式（混杂模式，兼容旧浏览器）
if (document .compatMode === 'CSS1Compat' ) {
console .log ('标准模式渲染' );
} else {
console .log ('怪异模式渲染' );
}
document.documentURI
含义 ：返回文档的位置（URI）。词源 ：Document（文档）+ URI（统一资源标识符）。语法 ：let uri = document.documentURI;参数及说明 ：和 document.URL 基本相同，但在某些 XML 文档中可能行为略有不同。 console .log (document .documentURI );
document.inputEncoding
含义 ：返回文档的字符编码（已废弃）。词源 ：Input（输入）+ Encoding（编码）。语法 ：let encoding = document.inputEncoding;说明 ：已被 document.characterSet 取代。
console .log (document .characterSet );
document.hidden
含义 ：返回一个布尔值，表示页面是否被隐藏（例如在后台标签页中）。词源 ：Hidden（隐藏的）。语法 ：let isHidden = document.hidden;参数及说明 ：用于页面可见性 API。如果页面被隐藏返回 true，否则返回 false。 document .addEventListener ('visibilitychange' , function (if (document .hidden ) {
console .log ('用户切换到了其他标签页' );
pauseVideo ();
} else {
console .log ('用户回来了' );
playVideo ();
}
});
document.visibilityState
含义 ：返回文档的可见性状态。词源 ：Visibility（可见性）+ State（状态）。语法 ：let state = document.visibilityState;参数及说明 ：可能的值：
'visible'：页面在前台标签页，窗口未最小化'hidden'：页面在后台标签页或窗口最小化'prerender'：页面正在预渲染（不可见）'unloaded'：页面正在卸载
if (document .visibilityState === 'visible' ) {
console .log ('页面可见，可以执行动画' );
}
document.designMode
含义 ：控制整个文档是否可编辑。词源 ：Design（设计）+ Mode（模式）。语法 ：document.designMode = 'on'; 或 'off';参数及说明 ：设置为 'on' 可以让整个页面变成可编辑状态，类似富文本编辑器。
document .designMode = 'on' ;
document.execCommand()
含义 ：执行命令操作可编辑区域的内容（已废弃，但仍可用）。词源 ：Exec（执行）+ Command（命令）。语法 ：document.execCommand(command, showUI, value);参数及说明 ：
command：命令名称，如 'bold', 'italic', 'copy', 'paste'。showUI：是否显示 UI，通常为 false。value：命令需要的值，如插入链接时的 URL。
document .execCommand ('bold' , false , null );
document .execCommand ('copy' );
document .execCommand ('createLink' , false , 'https://example.com' );
第十部分：文档集合与特殊属性
document.styleSheets
含义 ：返回包含文档中所有样式表对象的 StyleSheetList。词源 ：Style（样式）+ Sheets（工作表，复数）。语法 ：let sheets = document.styleSheets;参数及说明 ：可以访问页面中所有 CSS 样式表（包括内联、外链）。 console .log ('页面有 ' + document .styleSheets .length + ' 个样式表' );
let firstSheet = document .styleSheets [0 ];
console .log (firstSheet.cssRules );
document.embeds
含义 ：返回包含文档中所有 <embed> 元素的集合。词源 ：Embeds（嵌入元素，复数）。语法 ：let embeds = document.embeds;说明 ：类似于 document.plugins，用于访问嵌入的对象。 let flashCount = document .embeds .length ;
document.plugins
含义 ：document.embeds 的别名。词源 ：Plugins（插件，复数）。语法 ：let plugins = document.plugins;说明 ：返回嵌入插件的集合。 console .log (document .plugins === document .embeds );
document.fonts
含义 ：返回文档的 FontFaceSet 对象。词源 ：Fonts（字体，复数）。语法 ：let fonts = document.fonts;参数及说明 ：用于检查字体加载状态，等待字体加载完成等。 document .fonts .ready .then (function (console .log ('所有字体加载完成' );
});
console .log (document .fonts .status );
document.cookieEnabled
含义 ：返回一个布尔值，表示浏览器是否启用了 cookie。词源 ：Cookie + Enabled（启用）。语法 ：let enabled = document.cookieEnabled;说明 ：只读属性，用于检测 Cookie 是否可用。 if (!document .cookieEnabled ) {
alert ('请启用 Cookie 以获得完整体验' );
}
document.currentScript
含义 ：返回当前正在执行的 <script> 元素。词源 ：Current（当前的）+ Script（脚本）。语法 ：let script = document.currentScript;参数及说明 ：只能在脚本执行期间使用，用于获取当前脚本元素的信息。对于动态加载的脚本特别有用。
console .log (document .currentScript .src );
console .log (document .currentScript .getAttribute ('data-config' ));
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。
相关免费在线工具 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
