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

【Java 进阶篇】JavaScript DOM Document对象详解

news 2025/8/2 15:11:38

在这里插入图片描述

在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深入探讨Document对象，包括它的属性、方法以及如何使用它来操纵网页内容。

什么是`Document`对象

Document对象是DOM的根节点，代表整个HTML文档。通过Document对象，您可以访问和操纵HTML文档的各个部分，包括元素、属性、文本内容等。以下是一些Document对象的常见属性和方法：

document.getElementById(id): 通过元素的id属性获取元素。
document.getElementsByTagName(tagName): 通过标签名获取元素的集合。
document.createElement(tagName): 创建一个新的HTML元素。
document.querySelector(selector): 通过CSS选择器获取元素。
document.write(text): 将文本写入文档。
document.body: 获取文档的<body>元素。
document.title: 获取或设置文档的标题。

接下来，我们将逐一介绍这些属性和方法，并提供相应的案例以帮助理解。

获取元素

通过Document对象，我们可以使用不同的方法获取HTML文档中的元素。这些方法基于元素的id、标签名、类名、CSS选择器等，以下是一些常见的获取元素的方法：

通过id获取元素

使用getElementById方法可以通过元素的id属性获取元素。这是一种常见的操作，通常用于获取具体的DOM元素并进行操作。

<!DOCTYPE html>
<html>
<head><title>Get Element by ID Example</title>
</head>
<body><div id="myDiv">This is a div element.</div><script>// 获取id为"myDiv"的元素var divElement = document.getElementById("myDiv");divElement.innerHTML = "Element with id 'myDiv' has been updated!";</script>
</body>
</html>

在上述示例中，我们首先在HTML中创建一个<div>元素，并为其设置了id属性为"myDiv"。然后，通过JavaScript的getElementById方法，我们获取了这个元素，并使用innerHTML属性来更新其内容。

通过标签名获取元素

使用getElementsByTagName方法可以获取特定标签名的元素集合。这对于获取文档中所有相同标签名的元素非常有用。

<!DOCTYPE html>
<html>
<head><title>Get Elements by TagName Example</title>
</head>
<body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><script>// 获取所有<li>元素var listItems = document.getElementsByTagName("li");for (var i = 0; i < listItems.length; i++) {listItems[i].style.color = "blue";}</script>
</body>
</html>

在上述示例中，我们使用getElementsByTagName方法获取了所有<li>元素，并通过循环遍历这些元素来将它们的文本颜色设置为蓝色。

通过CSS选择器获取元素

使用querySelector方法可以通过CSS选择器获取元素。这允许您更灵活地选择特定元素，而不仅仅是根据id或标签名。

<!DOCTYPE html>
<html>
<head><title>Get Element by CSS Selector Example</title><style>.highlighted {background-color: yellow;}</style>
</head>
<body><p class="highlighted">This paragraph is highlighted.</p><p>This paragraph is not highlighted.</p><script>// 获取具有"highlighted"类的<p>元素var highlightedElement = document.querySelector(".highlighted");highlightedElement.style.fontWeight = "bold";</script>
</body>
</html>

在上述示例中，我们首先定义了两个<p>元素，其中一个具有class为"highlighted"，另一个没有。然后，通过querySelector方法选择具有"highlighted"类的元素，并将其font-weight属性设置为"bold"，从而使文本加粗显示。

这些方法让您能够根据不同的需求选择文档中的元素，然后对它们进行各种操作，例如修改样式、添加事件监听器等。

创建新元素

通过Document对象，您可以创建新的HTML元素，然后将它们添加到文档中。使用createElement方法可以创建一个新的元素。

<!DOCTYPE html>
<html>
<head><title>Create Element Example</title>
</head>
<body><div id="container"><!-- 新元素将会被添加到这里 --></div><script>// 创建一个新的<p>元素var newParagraph = document.createElement("p");newParagraph.innerHTML = "This is a new paragraph element.";// 获取容器元素并将新元素添加进去var container = document.getElementById("container");container.appendChild(newParagraph);</script>
</body>
</html>

在上述示例中，我们首先在HTML中创建了一个空的<div>元素，并为其设置了id属性为"container"，表示新元素将会被添加到这个容器中。接着，通过JavaScript的createElement方法，我们创建了一个新的<p>元素，并使用innerHTML属性来设置它的内容。最后，我们通过appendChild方法将新元素添加到容器中。

这个过程可以动态地向文档中添加内容，非常适用于需要根据用户操作动态生成元素的情况，比如添加新的列表项或评论。

写入文本

Document对象还提供了一个方便的方法write，用于将文本写入文档。这对于动态生成内容或调试JavaScript非常有用。

<!DOCTYPE html>
<html>
<head><title>Write Text Example</title>
</head>
<body><script>// 写入文本document.write("Hello, World!");</script>
</body>
</html>

在上述示例中，我们使用document.write方法将文本"Hello, World!"写入文档中。这可以在页面加载时或在JavaScript代码中使用，以将内容动态添加到文档中。

需要注意的是，document.write方法会替换整个文档内容，因此要慎用，以免破坏页面的结构。

获取文档标题

Document对象的title属性用于获取或设置文档的标题。

<!DOCTYPE html>
<html>
<head><title>Document Title Example</title>
</head>
<body><script>// 获取文档标题var title = document.title;alert("Document title: " + title);// 设置新的文档标题document.title = "New Document Title";</script>
</body>
</html>

在上述示例中，我们首先使用document.title来获取文档的标题，并使用alert方法显示出来。接着，我们通过document.title来设置新的文档标题。这对于在不刷新页面的情况下更改文档标题非常有用，比如在单页应用程序中。

DOM事件

Document对象也可以用于处理DOM事件。事件是与HTML元素相关的用户行为，例如单击、鼠标悬停、键盘输入等。JavaScript允许您捕获这些事件并执行相应的操作。以下是一些常见的DOM事件：

click: 当元素被单击时触发。
mouseover: 鼠标悬停在元素上时触发。
keydown: 键盘按键被按下时触发。
submit: 表单被提交时触发。
load: 页面和所有资源加载完毕时触发。

让我们看一个示例，演示如何使用Document对象来处理DOM事件：

<!DOCTYPE html>
<html>
<head><title>DOM Event Example</title>
</head>
<body><button id="myButton">Click Me</button><script>// 获取按钮元素var button = document.getElementById("myButton");// 添加点击事件处理程序button.addEventListener("click", function() {alert("Button clicked!");});</script>
</body>
</html>

在上述示例中，我们首先获取了一个按钮元素，其id为"myButton"。然后，我们使用addEventListener方法来添加一个点击事件处理程序，当按钮被点击时，将触发alert弹窗。

这样的事件处理程序允许您在用户与网页进行交互时执行特定的JavaScript代码，从而实现各种互动和反馈。

DOM样式

Document对象还允许您访问和修改元素的样式。这是通过style属性实现的，该属性包含了元素的CSS样式属性。

<!DOCTYPE html>
<html>
<head><title>DOM Style Example</title><style>#myDiv {width: 200px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div id="myDiv">This is a div element.</div><script>// 获取div元素var divElement = document.getElementById("myDiv");// 修改样式divElement.style.backgroundColor = "lightcoral";divElement.style.color = "white";divElement.style.fontSize = "16px";</script>
</body>
</html>

在上述示例中，我们首先定义了一个<div>元素，其id为"myDiv"，并为其添加了一些CSS样式。然后，通过getElementById方法获取了这个元素，使用style属性修改了其背景颜色、文本颜色和字体大小。这使您能够通过JavaScript动态更改元素的外观。

这只是Document对象的一小部分功能，但它足以展示出它的强大之处。使用这些方法和属性，您可以在网页上进行各种交互和操作。

总结

Document对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。

希望这篇博客对初学者有所帮助，使他们更好地理解Document对象及其用途。如果您想深入学习，建议查阅相关文档和继续探索更多关于DOM和JavaScript的内容。祝您在前端开发的道路上取得成功！

作者信息

作者：繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

【Java 进阶篇】JavaScript DOM Document对象详解

在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深…...

编程日记 2023/10/18 4:22:23

LetCode刷题[简单题](5)按摩师，迭代出最优解（卡尔曼滤波也是类似迭代）

所有的遍历寻求有条件约束的最大值都可以转换成，新的数带来的最大值的变化，问题往这个方向转化就可以，问题都是在最中进行选择的，因此关注的问题最大值得上限就好了，不必关注可能随机的下限。关注随机可能的下限会把问…...

编程日记 2023/10/18 4:21:23

C/C++笔试易错与高频题型图解知识点（二）—— C++部分（持续更新中）

目录 1.构造函数初始化列表 1.1 构造函数初始化列表与函数体内初始化区别 1.2 必须在初始化列表初始化的成员 2 引用&引用与指针的区别 2.1 引用初始化以后不能被改变，指针可以改变所指的对象 2.2 引用和指针的区别 3 构造函数与析构函数系列题 3.1构造函数与析…...

编程日记 2023/10/18 4:20:22

使用new创建动态结构

在运行时创建数组优于在编译时创建数组，对于结构（同一个结构可以存储多种类型的数据。）也是如此。需要在程序运行时为结构分配所需的空间，这也可以使用new运算符来完成。通过使用new，可以创建动态结构。同样&#xff0…...

编程日记 2023/10/18 4:19:20

论文笔记与复现[156]PARAFAC. tutorial and applications

原文下载：https://www.sciencedirect.com/science/article/abs/pii/S0169743997000324 摘要本文介绍了PARAFAC的多维分解方法及其在化学计量学中的应用。PARAFAC是PCA向高阶数组的推广，但该方法的一些特性与普通的二维情况截然不同。例如，…...

编程日记 2023/10/18 4:17:18

Python 基础30道测试题

你好，我是悦创。我会给出 30 道涉及 Python 基础的题目。这些题目将覆盖各种 Python 基础知识点，包括数据类型、控制结构、函数、模块等。输出 “Hello, World!”。创建一个变量，并为其赋值，然后输出该变量的值。输入两个数&a…...

编程日记 2023/10/18 4:16:13

【环境搭建】linux docker-compose安装rocketmq

创建目录 mkdir -p /data/docker/rocketmq/namesrv/logs mkdir -p /data/docker/rocketmq/broker1/conf mkdir -p /data/docker/rocketmq/broker1/logs mkdir -p /data/docker/rocketmq/broker1/store 给权限 chmod -R 777 /data/docker/rocketmq 创建配置文件 cd /data/d…...

编程日记 2023/10/18 4:12:09

python：使用卷积神经网络(CNN)进行回归预测

作者：CSDN @ _养乐多_ 本文详细记录了从Excel或者csv中读取用于训练卷积神经网络（CNN）模型的数据，包括多个自变量和1个因变量数据，以供卷积神经网络模型的训练。随后，我们将测试数据集应用于该CNN模型，进行回归预测和分析。该代码进一步修改可用于遥感影像回归模型. …...

编程日记 2023/10/18 4:10:06

数据结构----算法--五大基本算法

数据结构----算法–五大基本算法一.贪心算法 1.什么是贪心算法在有多个选择的时候不考虑长远的情况，只考虑眼前的这一步，在眼前这一步选择当前的最好的方案二.分治法 1.分治的概念分治法：分而治之将一个问题拆解成若干个解决方式…...

编程日记 2023/10/18 4:09:05

网格大师如何把b3dm转为osgb格式？

答：在网格大师的倾斜数据处理工具中选中“3DTiles转OSGB”，设定数据输入路径和输出路径提交任务即可。网格大师是一款能够解决实景三维模型空间参考、原点、瓦块大小不统一，重叠区域处理问题的工具“百宝箱”，集格式转换、坐标转…...

编程日记 2023/10/18 4:08:05

基于深度优先搜索的图遍历

这里写目录标题基于深度优先搜索的无向图遍历算法流程图Python实现Java实现基于深度优先搜索的有向图遍历Python实现基于深度优先搜索的无向图遍历使用深度优先搜索遍历无向图，将无向图用邻接表存储： 算法流程图初始化起点 source，当…...

编程日记 2023/10/18 4:07:03

Web3D虚拟人制作简明指南

如何在线创建虚拟人？虚拟人，也称为数字化身、虚拟助理或虚拟代理，是一种可以通过各种在线平台与用户进行逼真交互的人工智能人。在线创建虚拟人变得越来越流行，因为它为个人和企业带来了许多好处。通过虚拟助理或代理，您可以以更具吸引力和个性化的方式与客户或受众进…...

编程日记 2023/10/18 4:06:03

【大数据 - Doris 实践】数据表的基本使用（一）：基本概念、创建表

数据表的基本使用（一）：基本概念、创建表 1.创建用户和数据库2.Doris 中数据表的基本概念2.1 Row & Column2.2 Partition & Tablet 3.建表实操3.1 建表语法3.2 字段类型3.3 创建表3.3.1 Range Partition3.3.2 List Partition 1.创建用…...

编程日记 2023/10/18 4:05:00

剑指Offer || 038.每日温度

题目请根据每日气温列表 temperatures ，重新生成一个列表，要求其对应位置的输出为：要想观测到更高的气温，至少需要等待的天数。如果气温在这之后都不会升高，请在该位置用 0 来代替。示例 1: 输入: temperatures…...

编程日记 2023/10/18 4:01:56

URL because the SSL module is not available

Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirming the ssl certificate: HTTPSConnectionPool(host‘pypi.org’, port443): Max retries exceeded with url: /simple/pip/ (Caused by SSLError(“Can’t connect to HTT PS URL because the…...

编程日记 2023/10/18 4:00:53

什么是Document对象