当前位置：首页 > news >正文

Document对象的常用属性和方法

news 2025/7/11 6:55:56

1、Document 对象概述

Document 对象代表浏览器窗口中的文档，该对象是 Window 对象的子对象。由于 Window 对象是 DOM 对象模型中的默认对象，因此其方法和子对象不需要使用 Window 来引用。通过 Document 对象可以访问 HTML 文档中的任何 HTML 标记，并可以动态地改变 HTML 标记中的内容，如表单、图像、表格和超链接等。Document 对象在 JavaScript 1.0 版本中就已经存在，在随后的版本中又增加了几个属性和方法。

Document 对象的层次结构如图：

2、Document 对象的常用属性

Document 对象的常用属性及其说明：

属性	说明
body	提供对 <body> 元素的直接访问。
cookie	获取或设置与当前文档有关的所有 cookie。
domain	获取当前文档的域名。
lastModified	获取文档被最后修改的日期和时间。
referrer	获取载入当前文档的文档的 URL。
title	获取或设置当前文档的标题。
URL	获取当前文档的 URL。

【示例】使用 Document 对象的常用属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title></title>
</head>

<body>
    <h3>您好，欢迎访问 pan_junbiao的博客</h3>
    <h3>https://blog.csdn.net/pan_junbiao</h3>
    <p id="state"></p>
    <p id="domain"></p>
    <p name="url"></p>
</body>

</html>

<script type="text/javascript">
    window.onload = function () {
        //设置文档的背景色和前景色
        document.body.style.backgroundColor = "#B0E0E6";
        document.body.style.color = "green";

        //设置动态标题栏
        document.title = "Document 对象的常用属性";

        //获取当前文档的状态
        let state = document.readyState;
        document.getElementById("state").innerText = "文档状态：" + state;


        //获取域名
        let domain = document.domain;
        document.getElementById("domain").innerText = "获取域名：" + domain;

        //获取URL
        let url = document.URL;
        document.getElementsByName("url")[0].innerText = "获取URL：" + url;
    }
</script>

执行结果：

3、Document 对象的常用方法

Document 对象的常用方法以及说明：

方法	说明
getElementById()	返回指定id的对象，例如，获取 id="userName" 的元素。
getElementsByName()	返回带有指定名称的对象集合，例如，为所有 name="hobby" 的元素集合。
getElementsByTagName()	返回带有指定标签名的对象集合，如所有 <div> 元素。
getElementsByClassName()	通过类名返回集合，但 IE8 及以下需兼容处理。
createElement()	动态添加 HTML 标记。
write()	向文档中写入HTML或JavaScript语句。
writeln()	向文档中写入HTML或JavaScript语句，并以换行符结束。
open()	打开一个文档输出流并接收write和writeln方法创建页面内容
close()	关闭用 document.open() 方法打开的输出流。