JS document对象详解

1.document对象简介
2.document对象常用的属性
- document.URL
- document.referrer
3.document对象方法
- document.write
- document.writeln

1.document对象简介

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

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

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

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

2.document对象常用的属性

在这里插入图片描述

document.URL

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

语法：

document.URL

案例：

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

在这里插入图片描述

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

document.referrer

在JavaScript中，我们可以使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址。例如，我从页面A的某个链接进入页面B，如果在页面B中使用document.referrer，就可以获取页面A的地址。我们可以通过它来统计“用户都是通过什么方式来到你的网站的”

3.document对象方法

document对象的方法也非常多：

在这里插入图片描述

document.write

在JavaScript中，我们可以使用document.write()输出内容

语法：

document.write("内容");

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><title></title><script>document.write('<div style="color:hotpink;">hahaha</div>');</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

document.writeln

writeln方法跟write方法相似，唯一区别是writeln方法会在输出内容后面多加上一个换行符“\n”

语法：

document.writeln("内容")

案例：

<!DOCTYPE html>
<html lang="">
<head><title></title><script>document.writeln("HTML")document.writeln("CSS")document.writeln("JavaScript")</script>
</head>
<body>
</body>
</html>