JavaScript document 对象

JavaScript document 对象简介

从前面的学习可知，document 对象其实是 “window 对象” 下的一个子对象，它操作的是 HTML 文档里所有的内容。事实上，浏览器每次打开一个窗口，就会为这个窗口生成一个 window 对象，并且会为这个窗口内部的页面（即 HTML 文档）自动生成一个 document 对象，然后我们就可以通过 document 对象来操作页面中所有的元素了。

window 对象是浏览器为每个窗口创建的一个对象。通过 window 对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为 “BOM（浏览器对象模型）”。

document 对象是浏览器为每个窗口内的 HTML 页面创建的一个对象。通过 document 对象，我们可以操作页面的元素，这些操作又被统称为 “DOM（文档对象模型）”。

由于 window 对象是包括 document 对象的，所以我们可以 “简单” 地把 BOM 和 DOM 的关系理解成：BOM 包含 DOM。只不过对于文档操作来说，我们一般不把它看成是 BOM 的一部分，而是看成独立的，也就是 DOM。

其实在前面的章节中，我们就已经在大量使用 document 对象的属性和方法了，如 document.write()、document.getElementById()、document.body 等。这一章我们来系统学习一下 document 对象。

JavaScript document 对象的属性

document 对象的属性非常多，但是大多数都是很少会使用到的，下表只列出比较常用的属性（其他没列出的暂时不用管）。

document 对象常用的属性
属性	说明
document.title	获取文档的 title
document.documentElement	获取 html 元素
document.body	获取 body 元素
document.cookie	文档的 cookie
document.URL	当前文档的 URL
document.referrer	返回使浏览者到达当前文档的 URL

在上表中，有以下 3 点需要大家注意。

document.title 和 document.body 这两个我们在 “JavaScript 获取 DOM 元素” 这一节已经介绍过了，这里不再赘述。
document 对象还有 forms、images、links 等属性，分别用于获取页面中所有的表单、图片和链接。但在现代开发中，我们更倾向于使用 document.querySelectorAll() 或 document.getElementsByTagName() 来获取，这样更加灵活。
cookie 一般结合后端技术操作中用得比较多，document.cookie 单纯在前端中用得也不是非常多，我们简单看一下就行。

下面我们来介绍一下 document.URL 和 document.referrer。

1. document.URL

在 JavaScript 中，我们可以使用 document 对象的 URL 属性来获取当前页面的地址。

语法：

document.URL

示例 1：document.URL 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        const url = document.URL;
        console.log("当前页面地址是：", url);
    </script>
</head>
<body>
</body>
</html>

运行结果如下。

当前页面地址是：http://127.0.0.1:5500/index.html

分析：

document.URL 和 location.href 都可以获取当前页面的 URL，不过它们也有区别：document.URL 只能获取不能设置；location.href 既可以获取也可以设置。

关于 location.href 的使用，另请参阅：JavaScript location 对象。

2.document.referrer

在 JavaScript 中，我们可以使用 document 对象的 referrer 属性来获取用户在访问当前页面之前所在页面的地址。例如我从页面 A 的某个链接进入页面 B，如果在页面 B 中使用 document.referrer，就可以获取到页面 A 的地址。

document.referrer 非常酷，因为我们可以通过它来统计用户都是通过什么方式来到你的网站的。

我们可以建立两个页面，然后在第 1 个页面设置一个超链接指向第 2 个页面。当我们从第 1 个页面超链接进入第 2 个页面时，在第 2 个页面使用 document.referrer 就可以获取第 1 个页面的地址了。对于这个效果，小伙伴们自行在本地编辑器测试一下，很简单。

document 对象方法

document 对象的方法也非常多，但是也是很多没用的，下表只列出比较常用的方法（其他没列出的暂时不用管）。

document 对象常用的方法
方法	说明
document.getElementById()	通过 id 获取元素
document.getElementsByTagName()	通过标签名获取元素
document.getElementsByClassName()	通过 class 获取元素
document.getElementsByName()	通过 name 获取元素
document.querySelector()	通过选择器获取元素，只获取第 1 个
document.querySelectorAll()	通过选择器获取元素，获取所有
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容（不推荐使用）
document.writeln()	输出内容并换行（不推荐使用）

上表中，大多数方法在前面的章节已经介绍过了，这里我们顺便复习一下，可以用手遮住右边，看着左边，然后回忆一下它的用途是什么。

需要清楚的是，现代 Web 开发（2025年）中，我们极少使用document.write() 和 document.writeln()，原因在于：

性能极差：它们会阻碍页面的渲染，导致网页加载变慢。
清空页面的风险：如果在页面完全加载完毕后（即 load 事件触发后）再调用 document.write() 或 document.writeln()，它们会清空并覆盖整个页面的内容！

示例 2：document.write() 会覆盖整个页面

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3>绿叶网 - 为好教程，全力以赴</h3>
    <button id="btn">输出</button>

    <script>
        const oBtn = document.getElementById("btn");
        oBtn.addEventListener("click", function() {
            document.write("shit！页面被清空了！");
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当我们点击【输出】按钮之后，页面效果如下图 2 所示。

JavaScript document.write() 示例效果1

JavaScript document.write() 示例效果2