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对象常用的属性

JS document对象详解_第1张图片

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对象的方法也非常多:

JS document对象详解_第2张图片

document.write

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

语法:

document.write("内容");

案例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>title>
    <script>
        document.write('
hahaha
'
);
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>

在这里插入图片描述

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

你可能感兴趣的:(HTML,+,CSS,+,JS,javascript,前端)