document 解释 JS DOM 内置对象

document 解释，在前端 JavaScript 里面，document 代表文档对象，属于 DOM 模型核心对象，也就是当前网页 HTML 文档的根对象，浏览器加载网页之后自动生成，不需要手动创建，所有页面里面的标签元素属性节点都可以通过 document 来获取修改删除。除了前端 JS 含义，英文单词 document 本身也有名词文件文档，动词记录记载的意思，编程场景绝大多数时候指 JS 的 document 对象。

核心基础概念

DOM 全称文档对象模型，浏览器把 HTML 解析成一棵节点树，document 就是这棵树的顶层入口，通过它可以操作整个网页，比如获取元素绑定事件修改样式修改文本内容动态新增节点。

简单理解，document 就是网页的总控制器，写 JS 想操作页面元素，基本都要从 document 出发。

常用方法清单

常用属性

document.title 获取修改网页标题

document.body 获取 body 标签

document.head 获取 head 标签

document.URL 获取当前页面网址

document.cookie 读取设置 cookie

document.forms 获取页面所有表单

document.images 获取页面所有图片

基础代码示例

// 获取id为title的元素，修改文字

let el = document.getElementById("title");

el.innerText = "新的文字内容";

// 创建div并追加到页面

let div = document.createElement("div");

div.innerText = "动态创建节点";

document.body.appendChild(div);

两种含义区分

英文单词 document

名词 文档 文件 公文

动词 记录 记载

编程 JS 场景 document 首字母小写，是浏览器内置全局对象，不要和英文单词含义混淆。

常见易错点

第一 querySelectorAll 返回的是静态集合，不是数组，不能直接调用数组全部方法

第二 脚本写在 head 里面，页面还没加载完成，document 获取元素会得到 null，解决方式是把脚本放到 body 末尾，或者监听 DOMContentLoaded 事件

第三 getElementsByTagName 这类返回动态集合，DOM 更新之后集合内容会自动变化，和 querySelectorAll 静态集合不一样

收尾判断

document 解释核心就是 JS 里面网页文档根对象，是操作 HTML 页面的入口，掌握它的获取元素创建节点修改内容相关 API，是前端 DOM 操作的基础，同时区分英文单词本身文档记录的词义。

【相关 FAQ】

问题 1 document 解释里面 document 是全局对象吗

回答 1 document 解释，浏览器环境下 document 是自动生成的全局内置对象，不需要 new 创建，页面加载完成就可以直接调用。

问题 2 document 解释 getElementById 和 querySelector 区别

回答 1 document 解释，getElementById 只能通过 id 查找元素，querySelector 支持 css 选择器，可以用 class 标签属性等多种方式选中元素。

问题 3 document 解释 为什么获取元素是 null

回答 1 document 解释，获取元素返回 null 一般是 JS 代码执行早于 HTML 标签渲染，DOM 节点还没生成，需要延后脚本执行或者等待页面加载完成。

问题 4 document 解释 document.write 有什么缺点

回答 1 document 解释，document.write 如果页面加载完成之后调用，会覆盖整个原有页面内容，所以现代项目很少使用这个方法。

免责声明：本文内容仅为前端 JS 基础知识教学参考，不同浏览器对 DOM API 实现存在细微差异，实际开发请对照 MDN 官方规范，操作产生的相关风险由使用者自行承担。