1. document对象到底是个啥为什么前端天天在用它做前端这些年我几乎天天和document对象打交道。不管你是刚写JavaScript的新手还是已经用Vue、React堆过几个项目的开发者只要你需要操作页面上任何一个元素、读取当前页面的信息、或者动态往页面里塞内容document对象就绕不过去。很多人刚开始学JS的时候对document的印象就停留在“document.getElementById能拿到元素”。这个理解不算错但太片面了。document对象是浏览器把整个HTML文档暴露给JavaScript的一扇门它身上挂了大量的属性用来描述“当前这个文档长什么样、现在是什么状态、浏览器从哪儿加载了它、文档里包含了哪些区块”。可以这么说你把document对象身上的属性摸透了你对“浏览器是怎么看待一个网页的”这件事理解会上一个大台阶。这篇文章我打算从几个角度来拆先讲清楚document对象在整个浏览器环境里的位置然后把常用属性分类拆开揉碎了讲再结合真实业务场景演示这些属性的实际用法最后把我踩过的坑和新手容易犯的错一并整理出来。无论你是刚入门前端的小白还是想系统补一补基础的在职开发者这篇文章应该都能让你有收获。2. document对象的定位浏览器、window、DOM的关系2.1 从window到document的一层窗户纸要理解document得先看它在浏览器里的位置。浏览器打开一个页面会同时做两件重要的事一是创建一个window对象表示这个浏览器窗口或者说标签页的全局环境二是在window下面挂一个document对象表示当前加载的HTML文档内容。window是老大document是老大的一个重要下属。你在控制台敲window.document和在控制台直接敲document拿到的是同一个东西。JavaScript里很多全局变量其实都是window的属性document就是其中之一。这也解释了一个现象你在任何地方写document.title本质上是window.document.title只是window可以省略不写。如果把浏览器比作一家公司window就是整个公司的办公区document就是办公区里那张摆着图纸的设计桌。所有页面上的HTML元素最后都要经由document这张桌子来取用、修改、增删。2.2 属性和方法的边界一个是“是什么”一个是“做什么”很多初学者搞不清document对象的属性和方法有什么区别。方法需要加括号调用比如document.getElementById(app)它在执行一个动作属性则直接读取或赋值比如document.title 新标题它描述的是这个文档当前的一个特征值可以直接读也可以直接改。有一次我在群里帮人看代码对方写的是document.head.appendChild(script)然后又写了document.forms[0].value但后者一直报undefined。原因很简单forms是属性拿到的是表单元素的集合要拿到具体的表单字段值你得在这个集合里再往下查而不是在forms身上直接取value。这说明搞清楚属性和方法的边界并不是抠字眼而是真的能避免低级报错。3. 必须掌握的document核心属性分类拆解document对象身上的属性非常多但真正高频使用的其实可以归成几类文档信息类、节点获取类、状态与模式类、集合类、特殊能力类。下面我按照这个思路一个一个过。3.1 文档信息类title、URL、referrer、lastModified这一组属性描述的是“当前文档本身的基本信息”使用频率极高但很多人只会用其中一两个。document.title是页面的标题也就是标签页上显示的那行文字。它既可以读也可以写读的时候返回title标签里的内容写的时候会实时修改标签页上的显示。实战中一个很常见的场景是用户离开页面时把标签标题改成“哎呀别走”用户回来时再改回原来的标题。这个需求就是用document.title做的。document.URL返回当前文档的完整URL地址。注意是用字符串形式返回包含协议、域名、端口、路径、查询参数全部都有。做页面埋点、分享功能时经常要用它来确认当前到底在哪个页面。document.referrer返回的是“上一个页面的URL”也就是用户是从哪个页面跳转过来的。这个属性在做来源统计时非常有用比如判断用户是通过站内跳转还是从外部搜索进来的。如果用户直接在地址栏输入URL或者打开新标签页这个值通常是空字符串。document.lastModified返回文档最后修改时间的字符串。这个属性有一些隐蔽的坑它返回的是服务器返回的Last-Modified头信息但很多服务器或静态托管的响应头并没有正确配置这个字段导致你拿到的可能是当前请求时间而不是真实的文件修改时间。所以它适合做一个“仅供参考”的场景比如在页脚展示“最近更新于”但不适合作为严格的数据依据。3.2 节点获取类documentElement、body、head这一组属性是“获取页面各主要区块”的快捷入口我几乎每天都在用。document.documentElement是整个文档的根元素在HTML文档里就是html标签。它有一个非常经典的使用场景获取或设置页面的滚动高度时要用document.documentElement.scrollTop或者配合document.body.scrollTop来做兼容处理。这个我估计很多人都踩过一会儿在坑点部分详细说。document.head返回head标签document.body返回body标签。这两个属性的价值在于当你需要动态往页面里插入脚本、样式、meta标签时可以直接head.appendChild()或body.appendChild()而不用再用getElementsByTagName(head)[0]这种绕弯的方式。注意一点在页面解析过程中如果脚本放在head里且没有加defer或async此时body还不存在document.body会返回null。这是一个很容易踩的坑后面我会专门讲。3.3 状态与模式类readyState、compatMode、characterSet这组属性描述的是“文档正在经历什么状态、以什么模式渲染、用什么字符编码”相对底层但对排查问题很重要。document.readyState返回当前文档的加载状态取值有三种loading正在加载、interactiveDOM解析完成但子资源可能还在加载、complete整个页面和所有子资源都加载完毕。这个属性在写一些需要等待页面加载完成才能执行的逻辑时非常有用。你可以在readyState等于complete时再初始化某些组件也可以在interactive阶段提前绑定一些事件提升首屏交互速度。document.compatMode返回文档的渲染模式。最常见的值是CSS1Compat标准模式和BackCompat怪异模式。怪异模式是历史遗留问题老旧的页面没有写DOCTYPE声明时浏览器会以怪异模式渲染导致盒模型计算方式和标准模式不同。如果你的页面布局在某些浏览器下出现了诡异的偏移先检查一下compatMode是不是BackCompat很多时候根源就在这儿。document.characterSet返回文档的字符编码比如UTF-8。这个属性在做字符编码检测、处理特殊字符显示问题时很有参考价值。3.4 集合类属性forms、images、links、scripts这一组是按标签类型归档的HTMLCollection集合。它们不是什么新东西本质上就是getElementsByTagName的快捷方式但胜在直接、方便。document.forms返回页面上所有form元素的集合。做表单类项目时直接document.forms[0]就能拿到第一个表单不用再起个id。document.images返回所有img元素的集合。在做图片懒加载时遍历document.images再结合其他逻辑判断也是可以的。document.links返回所有带href属性的a元素集合注意是不带href的a标签不会进入这个集合。document.scripts返回所有script标签的集合排查页面加载了哪些脚本、某些动态引入的脚本有没有真正插进文档里用这个属性一查一个准。这些集合属性返回的都是HTMLCollection它是“实时”的。也就是说你拿到这个集合之后文档里新增或删除了对应的元素这个集合会自动更新。这个特性用好了很方便但是如果你在遍历的同时又去操作DOM删除元素就容易出现遍历越界或者漏项的问题。3.5 特殊能力类cookie、domaindocument.cookie和document.domain是两个比较特殊的属性因为它们不仅仅是“描述文档信息”还牵扯到浏览器安全策略用起来限制很多。document.cookie在读取时返回当前域名下所有非HttpOnly的cookie拼接成的字符串格式是namevalue; name2value2这种分号加空格分隔的形式。写入时你赋值一个字符串比如document.cookie namexiaoming; path/它会把这条cookie加到现有cookie集合里注意是“新增/覆盖”而不是“整体替换”。这跟普通属性的赋值逻辑完全不同很多新手在这里被坑过以为用等号赋值就能清掉所有cookie结果发现旧的cookie还在。document.domain用于处理同源策略下的跨子域问题。比如主站是example.com子应用是app.example.com两个页面如果都设置了document.domain example.com它们就可以在某种限制下互相访问。这个属性在现代前端开发中用得越来越少因为更好的跨域方案已经很多了但了解它的原理还是有助于理解浏览器的同源策略限制。4. 实战场景用好document属性解决真实业务问题4.1 用document.title实现页面消息提醒我之前在一个后台管理系统里做过一个需求客服在等待用户消息时如果页面不是当前激活的标签页就把标签标题改成“(1) 新消息提醒”激活页面后再恢复原样。核心代码非常简单let originTitle document.title; let messageCount 0; function showMessageNotify(count) { document.title (${count}) 新消息通知; } function clearMessageNotify() { document.title originTitle; } document.addEventListener(visibilitychange, function () { if (document.visibilityState visible) { clearMessageNotify(); messageCount 0; } });这段代码里不只是用了document.title还用到了document的visibilityState属性和visibilitychange事件。实际开发时要注意document.title赋值时如果标题里包含特殊字符比如尖括号浏览器不会把它解析成HTML而是直接当纯文本显示这倒是挺安全的不需要额外转义。另外标题太长时浏览器会截断显示所以尽量控制在20个字符以内。4.2 通过document.URL和URLSearchParams解析页面参数有一天产品跟我说需要根据用户从分享链接打开时带的参数来展示不同的宣传语。这时候document.URL就派上用场了function getParamFromURL(paramName) { let currentURL document.URL; let urlObj new URL(currentURL); return urlObj.searchParams.get(paramName); } let campaign getParamFromURL(campaign); if (campaign summer_sale) { // 展示夏日大促相关的banner }这里有个小细节document.URL和location.href在大多数情况下是相同的但document.URL是一个只读属性它只反映文档加载时的URL。如果页面内部通过history.pushState改变了URL地址location.href会更新但document.URL在早期浏览器里可能还是旧值。为了避免这种不确定性推荐优先使用location.href和URL对象来处理动态URL解析需求document.URL更适合在“只需要静态读取当前文档来源”的场景下使用。4.3 遍历document.forms实现表单一键校验和数据收集一次做一个老项目改造页面上有七八个表单每个表单的校验和提交逻辑都是单独写的重复代码一大堆。后来我直接用document.forms统一处理function collectAllFormData() { const formData {}; for (let i 0; i document.forms.length; i) { const form document.forms[i]; const formObj {}; const elements form.elements; for (let j 0; j elements.length; j) { const field elements[j]; if (field.name) { formObj[field.name] field.value; } } formData[form.name || form_ i] formObj; } return formData; }需要注意的是form.elements也是一个集合属性它包含表单里的input、select、textarea、button等。遍历时最好跳过那些没有name属性的字段不然收集到的数据没法对应到业务字段。另外button元素也会出现在form.elements里需要根据field.type判断一下别把按钮的value误当成用户输入。4.4 结合document.readyState设计更稳健的初始化方案有时候页面加载比较慢在外部脚本里直接执行DOM操作可能赶上body还没解析完。用document.readyState做一个统一的初始化入口可以避免这个问题function onDocumentReady(callback) { if (document.readyState loading) { document.addEventListener(DOMContentLoaded, function () { callback(); }); } else { callback(); } } onDocumentReady(function () { // 在这里执行需要DOM就绪的初始化操作 });这个方法比直接在body底部放script要稳因为即使脚本因为某些原因被提前加载了也不会白报错。我写公共组件时都会用这个思路包一层保证无论调用方把脚本放在哪里初始化逻辑都能正确执行。5. 新手必踩的坑与排查技巧实录5.1 document.body为null的尴尬时刻这个坑很多写过原生JS的人应该都遇到过。把script标签放在head里然后在script里写document.body.appendChild(...)结果控制台报错“Cannot read properties of null (reading appendChild)”。原因前面提到过页面解析到head里的script时body标签还没解析到浏览器还不知道body是什么document.body自然就是null。解决方案有这么几种把script放到body结束标签之前或者给script加defer属性或者在代码里判断document.readyState等DOM就绪后再执行。如果你在写公共库强烈建议用第三种这样调用方放在哪里都不会错。5.2 document.cookie赋值的迷惑性我刚工作那会儿以为给document.cookie赋值一个空字符串就能清掉cookie结果怎么赋值都没用。后来才搞明白document.cookie的赋值是“新增/修改一条cookie”不是“重置整个cookie集合”。要删除一条cookie得把它的过期时间设置为过去的时间点document.cookie name; expiresThu, 01 Jan 1970 00:00:00 UTC; path/;另外还要注意path。如果原cookie设置时带了path/admin而你删除时只写path/那删除操作会失败因为浏览器认为你指向的是不同路径下的cookie。5.3 滚动高度的兼容性问题获取页面滚动高度时标准模式下的document.documentElement.scrollTop和怪异模式下的document.body.scrollTop返回的结果可能不一样。老项目如果没有统一DOCTYPE你写死用document.documentElement.scrollTop在怪异模式下可能就是0。比较稳妥的做法是两者都取一下function getScrollTop() { return document.documentElement.scrollTop || document.body.scrollTop; }这种行为差异其实就是document.compatMode的值不同导致的。排查页面滚动位置相关的Bug时先看页面是怎么声明DOCTYPE的往往能快速定位问题。5.4 动态创建的脚本和document.scripts的不同步问题有人会用这种方式动态加载JSlet script document.createElement(script); script.src some.js; document.body.appendChild(script); console.log(document.scripts.length); // 可能是旧数量这是因为appendChild操作执行之后document.scripts这个实时集合确实会更新但如果你在插入之前就缓存了scripts引用再拿这个缓存集合去查长度就可能看不到新增的script。遇到这种问题每次查询都重新从document.scripts取一遍就好。5.5 跨域iframe里访问document的权限限制本地开发时你在父页面里尝试访问iframe子页面的document如果子页面是跨域地址浏览器会抛出安全错误。这个限制是浏览器安全的必要机制不是Bug。做相关功能时要考虑通过postMessage这种跨域通信方案来传递信息而不是在父页面里直接拿子页面的document。6. 框架开发中document的使用边界与HBuilder开发体验6.1 React和Vue项目里还能随便操作document吗很多用框架的人会忽略document相关知识的价值觉得框架已经帮你操作DOM了不需要再关心document。这个想法我能理解但不完全认同。框架确实帮你封装了大部分DOM操作但有些场景还是绕不开document服务端渲染SSR就是最典型的场景。在服务端环境下没有window、document直接在组件顶层代码里调用document的方法会直接报错。你就需要判断当前环境是不是浏览器再决定要不要执行相关操作。常见的做法是if (typeof document ! undefined) { // 只有浏览器环境才执行的逻辑 }还有一种场景是注册全局事件监听、操作cookie、读取URL参数、修改网页标题。这些操作本身就依赖document不管你是不是用了框架。比如在Vue的某个路由切换时设置document.title这种操作放在路由守卫里执行就行框架并不会帮你做这个。所以我的看法是框架解决的是“组件化、状态管理、视图更新”的问题document解决的是“浏览器原生文档接口”的问题。两者不是同层的东西存在大量交集场景基础扎实只会让框架用得更好。6.2 HBuilder配置HTML、CSS、JavaScript的便捷性前面热词里提到了HBuilder配置html、css、javascript如果你在用的是HBuilder或HBuilderX那么写document相关代码时其实有一些小便利。新建的HTML页面模板会自动帮你在body里预留好script位置还会生成标准的meta标签和title。这样你写document.title、document.characterSet相关的代码时基础环境就是合理的。另外一个实用建议是在HBuilderX里都配置了内置浏览器预览打开控制台后直接输入document.body、document.title等属性可以实时看到当前的文档信息特别适合做属性练习和调试。我教朋友学原生JS时就让他先打开控制台把document的常用属性一个个敲一遍看返回值比看任何教程都直观。6.3 两个小技巧批量测试属性和安全判断环境如果你想一次性把document的多个核心属性都打出来看看可以这样console.log({ title: document.title, url: document.URL, referrer: document.referrer, readyState: document.readyState, compatMode: document.compatMode, characterSet: document.characterSet, formsCount: document.forms.length, imagesCount: document.images.length, linksCount: document.links.length, scriptsCount: document.scripts.length });这段代码在页面加载的不同阶段执行你会发现readyState的值会变化甚至scriptsCount会随着页面继续加载而增加。这种“亲手摸一遍属性”的练习方式比死记硬背文档有效果得多。7. 几个值得养成的document操作习惯最后分享几个我在实际工作中养成的习惯算不上什么高深技术但确实帮我少踩了很多坑。第一批量查找节点时如果页面结构稳定考虑用document.querySelectorAll替代document.getElementsByTagName前者返回的是静态NodeList不会因为后续DOM变更导致你在遍历时踩到实时集合的坑。第二操作document.cookie时尽量封装成一个小的读写删工具函数不要在业务代码里直接拼字符串。这样cookie的path、expires这些参数都集中管理后期改起来也方便。第三动态往页面追加script时尽量显式设置script.async或script.defer避免阻塞页面解析。同时记得处理onerror事件否则脚本加载失败时你只会看到一个静默的控制台报错很难定位。第四检查自己的页面是否为怪异模式时直接在控制台敲document.compatMode如果是BackCompat尽早去修复DOCTYPE声明不然各种盒模型和滚动相关的Bug会源源不断找上门。写到这里这篇文章也基本到尾声了。document对象身上值得深挖的属性其实还有很多比如activeElement、hidden、visibilityState、location等等这些在特定场景下都能发挥大作用。掌握了document对象的属性你在调试前端代码、解决兼容性问题、做一些原生JS功能时会明显感觉到心里更有底。如果你看完这篇文章后能打开控制台把里面提到的属性挨个试一遍我相信你对document对象的理解会上一个台阶。