JS document对象详解

作者：从前慢现在也慢 | 2024-04-26 17:05:33

踩

js document

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
1

案例：

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

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("内容");
1

案例：

<!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>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

document.writeln

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

语法：

document.writeln("内容")
1

案例：

<!DOCTYPE html>
<html lang="">
<head>
    <title></title>
    <script>
        document.writeln("HTML")
        document.writeln("CSS")
        document.writeln("JavaScript")
    </script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

writeln方法输出的内容之间有空隙，而write方法输出的内容之间则没有

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/492149