Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法

pan_junbiao

已于 2025-03-31 20:20:20 修改

阅读量1.7k

点赞数 37

分类专栏： HTML5 JavaScript 我の原创文章标签： javascript 前端 html

于 2025-03-29 19:02:19 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/146691128

版权

关于 Window对象和 Document 对象的详细使用，系列文章：

《Window对象的常用属性和方法》

《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》

《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性》

《Document自定义属性：getAttribute()、setAttribute()、removeAttribute()函数》

《Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数》

《JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框》

《JavaScript实现下拉框动态绑定与级联功能》

《JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()》

《JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作》

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(&