5.1.document

最新推荐文章于 2025-04-05 20:55:33 发布

chxii

最新推荐文章于 2025-04-05 20:55:33 发布

阅读量718

点赞数 14

分类专栏： go语言 # 前端文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/chxii/article/details/146857394

版权

document对象是DOM（文档对象模型）的核心接口，document 对象是 JavaScript 中最重要的对象之一，它代表了当前浏览器窗口或标签页中加载的 HTML 文档。通过 document 对象，开发者可以访问、修改和操作页面的内容、结构和样式，实现丰富的动态效果和交互功能。

定义：document 是全局对象 window 的一个属性，代表当前加载的文档。它是 DOM（文档对象模型）的入口点，允许 JavaScript 与 HTML 和 XML 文档进行交互。
类型：document 是一个 Document 接口的实例，具有丰富的属性和方法，用于操作文档的内容和结构。

在浏览器环境中，document 对象是全局可访问的，可以直接使用。例如：

console.log(document.title); // 访问文档的标题

`document` 对象的常用属性

1. `document.title`

描述：获取或设置当前文档的标题（即 <title> 标签的内容）。

console.log(document.title); // 获取文档标题
document.title = "新的页面标题"; // 设置文档标题

2. `document.body`

描述：返回文档的 <body> 元素。

const body = document.body;
console.log(body); // 输出 <body> 元素

3. `document.head`

描述：返回文档的 <head> 元素。

const head = document.head;
console.log(head); // 输出 <head> 元素

4. `document.documentElement`

描述：返回文档的根元素 <html>。

const html = document.documentElement;
console.log(html.tagName); // 输出 "HTML"

5. `document.URL` 和 `document.location`

描述：获取当前文档的 URL 地址。

console.log(document.URL); // 获取当前页面的完整URL
console.log(document.location.href); // 等同于 document.URL

6. `document.referrer`

描述：返回链接到当前页面的前一个页面的 URL。

console.log(document.referrer); // 输出来源页面的URL

7. `document.forms` 和 `document.images`

描述：分别返回文档中所有 <form> 和 <img> 元素的集合。

const forms = document.forms;
console.log(forms); // 输出所有表单元素的集合

const images = document.images;
console.log(images); // 输出所有图片元素的集合

`document` 对象的常用方法

1. 获取元素的方法

a. `document.getElementById(id)`

描述：根据元素的 id

最低0.47元/天解锁文章

5.1.document

document 对象的常用属性

1. document.title

2. document.body

3. document.head

4. document.documentElement

5. document.URL 和 document.location

6. document.referrer

7. document.forms 和 document.images

document 对象的常用方法