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

JavaScript 中的 Document 对象详解

article 2025/9/20 15:35:07

JavaScript 中的 Document 对象详解

一、Document 对象概述

1. 定义与作用

Document 对象是浏览器中 HTML 文档的入口点，是 Window 对象的属性（即 window.document）。它代表整个 HTML 页面，提供了操作和访问页面内容的方法和属性，是 DOM（文档对象模型）的核心。

2. 核心功能

访问和修改 HTML 元素
处理事件
动态创建和修改页面内容
操作 CSS 样式
与浏览器历史记录交互
处理 cookies

3. 文档类型

Document 对象可以表示不同类型的文档：

HTML 文档（HTMLDocument）
XML 文档（XMLDocument）
SVG 文档（SVGDocument）

二、Document 对象的基本属性

1. 文档元信息

URL 相关

console.log(document.URL);        // 当前文档的完整 URL
console.log(document.domain);     // 当前文档的域名
console.log(document.baseURI);    // 文档的基础 URI

标题和字符编码

document.title = '新标题';        // 获取或设置文档标题
document.charset = 'UTF-8';      // 获取或设置字符编码

引用和最后修改时间

console.log(document.referrer);   // 链接到当前页面的前一个页面的 URL
console.log(document.lastModified); // 文档的最后修改时间

2. 文档结构引用

根元素

const htmlElement = document.documentElement; // <html> 元素

body 和 head

const body = document.body;       // <body> 元素
const head = document.head;       // <head> 元素

文档模式

console.log(document.compatMode); // 文档渲染模式 (CSS1Compat 或 BackCompat)

3. 文档状态

console.log(document.readyState); // 文档加载状态: loading, interactive, complete// 监听文档加载完成
document.addEventListener('DOMContentLoaded', () => {console.log('DOM 加载完成');
});window.addEventListener('load', () => {console.log('页面完全加载完成');
});

三、选择和查找元素

1. 通过 ID 选择

const element = document.getElementById('myId'); // 返回单个元素

2. 通过标签名选择

const elements = document.getElementsByTagName('p'); // 返回 HTMLCollection

3. 通过类名选择

const elements = document.getElementsByClassName('myClass'); // 返回 HTMLCollection

4. 通过选择器选择

querySelector

const element = document.querySelector('div.container'); // 返回第一个匹配的元素

querySelectorAll

const elements = document.querySelectorAll('p.highlight'); // 返回 NodeList

5. 元素集合差异

HTMLCollection

动态集合，元素变化时自动更新
只能通过索引访问
示例：getElementsByTagName() 的返回值

NodeList

静态集合或动态集合（取决于创建方式）
可以通过索引和 forEach 访问
示例：querySelectorAll() 的返回值

四、创建和修改元素

1. 创建元素

const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.textContent = '新创建的元素';

2. 添加元素

appendChild

document.body.appendChild(newDiv

JavaScript 中的 Document 对象详解

JavaScript 中的 Document 对象详解一、Document 对象概述 1. 定义与作用 Document 对象是浏览器中 HTML 文档的入口点，是 Window 对象的属性（即 window.document）。它代表整个 HTML 页面，提供了操作和访问页面内容的方法和属性，是 DOM（文档对象模型）的核心。 2. 核…...

编程日记 2025/9/17 14:12:54

archlinux按键映射按键自定义

我想把右ALT映射成Super键，也就是mod4键位，折腾了半天没有成功。问AI也没有解决，与是只好自己去看wiki了，发现原来很简单。只是我没有clear。 https://wiki.archlinuxcn.org/wiki/Xmodmap 安装xorg sudo pacman -S xorg直接选择…...

编程日记 2025/8/23 22:18:43

【python】字典和数组的数组

一、字典是由键值对（key-value）组成的因为 results[num] {...} 这种写法是通过键（这里是 num）为 results 赋值，results 就是一个字典（dict）。在 Python 里，字典是由键值对&#…...

编程日记 2025/9/20 0:50:48

软考IPSEC案例分析

要回忆IPSEC点击这里题目 5/21 某全国连锁企业的总部和分布在全国各地的30家分公司之间经常需要传输各种内部数据，因此公司决定在总部和各分公司之间建立VPN技术。具体拓扑如下： 配置部分只显示了与总部与分公司1的配置。根据拓扑完成问题1-问题2。…...

编程日记 2025/9/20 1:52:31

C++（23）：容器类＜vector＞

目录一、核心概念二、基本语法 1. 头文件 2. 声明与初始化三、常用操作四、具体实例 1、size()、front()、back() 2、push_back()、pop_back()、capacity() 3、reserve（） 一、核心概念 Vectors 包含着一系列连续存储的元素,其行为…...

编程日记 2025/9/8 18:26:04

Hugo 安装保姆级教程（搭建个人blog）

Hogo 安装保姆级教程友链参考文章： https://blog.csdn.net/xianyun_0355/article/details/140261279 前言 Hugo 是 Go 编写的静态网站生成器，速度快，易用，可配置。作为一款跨平台开源建站系统，当前提供 Windows&…...

编程日记 2025/9/14 23:59:30

tomcat查看状态页及调优信息

准备工作先准备一台已经安装好tomcat的虚拟机，tomcat默认是状态页是默认被禁用的 1.添加授权用户 vim /usr/local/tomcat/conf/tomcat-users.xml22 <role rolename"manager-gui"/>23 <user username"admin" password"tomcat&q…...

编程日记 2025/9/17 9:13:42

从坏道扫描到错误修复：HD Tune实战指南

一、硬盘检测的必要性随着计算机使用时间的增加，机械硬盘和固态硬盘都会出现不同程度的性能衰减。定期进行硬盘健康检查可以：及时发现潜在故障；预防数据丢失风险；掌握存储设备实际状态。二、HD Tune功能解析性能测试&#x…...

编程日记 2025/9/7 20:46:11

将嵌入映射到 Elasticsearch 字段类型：semantic_text、dense_vector、sparse_vector

作者： Andre Luiz 讨论如何以及何时使用 semantic_text、dense_vector 或 sparse_vector，以及它们与嵌入生成的关系。通过这个自定进度的 Search AI 实践学习亲自体验向量搜索。你可以开始免费云试用，或者在本地机器上尝试 Elastic。多年来…...

编程日记 2025/9/7 20:43:30

【LeetCode 热题100】17：电话号码的字母组合（详细解析）（Go语言版）

☎️ LeetCode 17. 电话号码的字母组合（回溯 DFS 详解） 📌 题目描述给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按任意顺序返回。数字到字母的映射如下（与电话按键相同）…...

编程日记 2025/5/31 23:47:30

解决uni-app开发中的“TypeError: Cannot read property ‘0‘ of undefined“问题

问题背景在使用uni-app开发小程序或App时，你可能会遇到这样一个错误: TypeError: Cannot read property 0 of undefinedat uni.promisify.adaptor.js:7这个错误看起来很唬人，但它实际上与uni-app框架中的Promise适配器有关。今天，我们将深…...

编程日记 2025/9/8 18:25:15

翻译题文章目录翻译题一带一路中国结一带一路 The “One Belt and One Road” Initiative aims to achieve win-win and shared development. China remains unchanged in its commitment to foster partnerships. China pursues an independent foreign policy of peace, …...

编程日记 2025/9/7 20:44:55

西门子1200/1500博图（TIA Portal）寻址方式详解

西门子博图（TIA Portal）是西门子公司推出的自动化工程软件平台，广泛应用于工业自动化领域。在编写PLC程序时，寻址方式是一个非常重要的概念，它决定了如何访问和操作PLC中的数据和资源。本文将详细介绍西门子博图中的寻…...

编程日记 2025/9/7 20:43:30

《Python星球日记》第78天：CV 基础与图像处理

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）目录一、计算机视觉（CV）简介1. 什么是计算机视觉？2. 计算机视觉的应用场景3. 图像的基本属性a》像素（Pixel）b》通道（Channel）c》分辨率（Res…...

编程日记 2025/6/10 15:06:43

踩坑：uiautomatorviewer.bat 打不开

错误信息运行 sdk\tools\bin\uiautomatorviewer.bat 报错 -Djava.ext.dirs..\lib\x86_64;..\lib is not supported. Use -classpath instead. Error: Could not create the Java Virtual Machine. Error: A fatal exception has occurred. Program will exit. 原因 java版…...

编程日记 2025/9/18 23:29:31

Atcoder Beginner Contest 406

比赛链接：ABC406 A - Not Acceptable 将小时转换成分钟直接进行判断。时间复杂度： O ( 1 ) O(1) O(1)。 #include <bits/stdc.h> using namespace std;int main() {ios::sync_with_stdio(false); cin.tie(nullptr); cout.tie(nullptr);int a,…...

编程日记 2025/9/18 11:48:08

记录一次win11本地部署deepseek的过程

20250518 win11 docker安装部署 ollama安装 ragflow部署 deepseek部署文章目录 1 部署Ollama下载安装ollama配置环境变量通过ollama下载模型deepseek-r1:7b 2 部署docker2.1 官网下载amd版本安装2.2 配置wsl2.3 Docker配置：位置代理镜像源 3 部署RAGFlow更换ragfl…...

编程日记 2025/9/7 18:40:46

嵌入式STM32学习——外部中断EXTI与NVIC的基础练习⭐

按键控制LED灯按键控制LED的开发流程： 第一步：使能功能复用时钟第二布，配置复用寄存器第三步，配置中断屏蔽寄存器固件库按键控制LED灯外部中断EXTI结构体：typedef struct{uint32_t EXTI_Line; …...

编程日记 2025/9/18 11:29:26

进程状态并详解S和D状态

#define TASK_RUNNING 0x0000 // 运行或就绪（在运行队列） #define TASK_INTERRUPTIBLE 0x0001 // 可中断睡眠（S状态） #define TASK_UNINTERRUPTIBLE 0x0002 // 不可中断睡眠（D状态） #define __TASK_STOP…...

编程日记 2025/9/18 14:22:28

数据获取_Python

1 导入数据 (1) 文件系统 ①表格形式的数据:CSV/Excel import pandas as pd# 读取 CSV 文件 data pd.read_csv(sales_data.csv)# 读取excel data2 pd.read_excel(file.xlsx, sheet_nameSheet2, skiprows5, nrows100) ②JSON # 使用 pandas 库 import pandas as pddata pd…...

编程日记 2025/9/18 19:41:29

＜前端小白＞前端网页知识点总结

HTML 标签 1. 标题标签 h1到h6 2. 段落标签 p 3. 换行 br 水平线 hr 4. 加粗 strong 倾斜 em 下划线 ins 删除 del 5. 图像标签 img src-图像的位置 alt- 图片加载失败显示的文字替换文本 title--- 鼠标放到图片上显示的文字提示…...

编程日记 2025/9/17 11:14:00