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

在这里插入图片描述

在前端开发中，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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/161158.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

QT_day1

QT_day1

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//窗口相关设置this->setWindowTitle("登录窗口");this->setWindowIcon(QIcon("C:\\Users\\EDY\\Desktop\\pictrue\\qq.png"));this->setWindowFlag(Qt::…
阅读更多...
Linux性能优化--性能工具：网络

Linux性能优化--性能工具：网络

7.0 概述 本章介绍一些在Linux上可用的网络性能工具。我们主要关注分析单个设备/系统网络流量的工具&#xff0c;而非全网管理工具。虽然在完全隔离的情况下评估网络性能通常是无意义的(节点不会与自己通信),但是&#xff0c;调查单个系统在网络上的行为对确定本地配置和应用程…
阅读更多...
day06-前后端项目上传到gitee、后端多方式登录接口、发送短信功能、发送短信封装、短信验证码接口、短信登录接口

day06-前后端项目上传到gitee、后端多方式登录接口、发送短信功能、发送短信封装、短信验证码接口、短信登录接口

1 前后端项目上传到gitee 2 后端多方式登录接口 2.1 序列化类 2.2 视图类 2.3 路由 3 发送短信功能 4 发送短信封装 4.0 目录结构 4.1 settings.py 4.2 sms.py 5 短信验证码接口 6 短信登录接口 6.1 视图类 6.2 序列化类 1 前后端项目上传到gitee # 我们看到好多开源项目…
阅读更多...
解决方案-LBS用户位置GEO附近人/店铺

解决方案-LBS用户位置GEO附近人/店铺

附近人 附近人列表功能mysqlredis GEOthinkphp 附近人列表功能 方案优势缺点Mysql外接正方形逻辑清晰&#xff0c;实现简单&#xff0c;支持多条件筛选效率较低&#xff0c;不适合大数据量&#xff0c;不支持按距离排序MysqlGeohash借助索引有效提高效率&#xff0c;支持多条件…
阅读更多...
实践笔记-docker安装及配置镜像源

实践笔记-docker安装及配置镜像源

docker安装及配置镜像源 1.卸载旧版本docker2. 安装yum工具3. 设置镜像仓库4.安装docker5. 启动docker服务6.docker镜像源配置 当前环境linux为centos7 1.卸载旧版本docker 如果以前安装过旧版本可以先执行卸载&#xff0c;下面的截图是没有安装过。 yum remove docker \ do…
阅读更多...
SLM6500 适用于单节锂电池充电芯片 2A同步降压型鲤电池充电电路

SLM6500 适用于单节锂电池充电芯片 2A同步降压型鲤电池充电电路

SLM6500 是一款面向5V交流适配器的2A离子电池充电器。它是采用1.5MH2固定频率的同步降压型转换器&#xff0c;因此具有高达90%以上的充电效率&#xff0c;自身发热量极小。 SLM6500包括完整的充电终止电路、自动再充电和一个精确度达土1%的4.2V预设充电电压&#xff0c…
阅读更多...
请求分页管理方式（页表机制，缺页中断，地址变换）

请求分页管理方式（页表机制，缺页中断，地址变换）

请求分页存储管理与基本分页存储管理的主要区别: 在程序执行过程中&#xff0c;当所访问的信息不在内存时&#xff0c;由操作系统负责将所需信息从外存调入内存&#xff0c;然后继续执行程序。&#xff08;操作系统要提供请求调页功能&#xff0c;将缺失页面从外存调入内存)若…
阅读更多...
解决vue3 + vite + ts 中require失效的问题(require is not defind)

解决vue3 + vite + ts 中require失效的问题(require is not defind)

require is not defind因为require是属于webpack的方法&#xff0c;vite中找不到这个方法肯定报错 解决办法 通过vite官网了解到新的引入方式&#xff0c;我使用了其中一种 imgList: [{name: "lj",src: new URL(../../assets/img/applyList.png, import.meta.url).…
阅读更多...
WebAPI+EF连接SQL Server数据库

WebAPI+EF连接SQL Server数据库

右击解决方案-添加-新建项目-选择“类库&#xff08;.NET Framework&#xff09;”,新建的项目取名叫WebApi1.EF 添加EF&#xff1a; 新建一个ADO实体数据模型 选择DBFirst 数据源选择MySql 填写数据库地址及账号密码 选择实体框架版本 选择在数据库中的表User 到此配置完成&am…
阅读更多...
非母语玩家如何撰写英文研究性论文：1 Introduction

非母语玩家如何撰写英文研究性论文：1 Introduction

参考书——《Science research writing for non-native speakers of English》 文章目录 1 结构问题2 语法与撰写技巧2.1 Tense pairs&#xff1a;时态对2.2 Signaling Language2.3 Passive/Active 主动与被动语态2.4 Paragraphing 分段 3 Writing Task: Building a Model——构…
阅读更多...
C/C++笔试易错与高频题型图解知识点（二）—— C++部分（持续更新中）

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

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

VScode platformio的使用

一、platformio 工程创建 打开vscode界面你会发现左下多了个家的小图标&#xff0c;点击这里就可以进入platformio。 在右侧Quick Access栏中&#xff0c;有4个选项。可以看得出来&#xff0c;我们这里直接点击创建一个新的工程。 点击New Project打开project配置界面&#x…
阅读更多...
图详解第四篇：单源最短路径--Dijkstra算法

图详解第四篇：单源最短路径--Dijkstra算法

文章目录 1. 最短路径问题2. 单源最短路径--Dijkstra算法算法思想图解如何存储路径及其权值代码实现调式观察打印最短路径Dijkstra算法的缺陷 3. 源码 1. 最短路径问题 最短路径问题&#xff1a; 从带权有向图&#xff08;求最短路径通常是有向图&#xff09;G中的某一顶点出发…
阅读更多...
Unity——数据存储的几种方式

Unity——数据存储的几种方式

一、PlayerPrefs PlayerPrefs适合用于存储简单的键值对数据 存储的数据会在游戏关闭后依然保持&#xff0c;并且可以在不同场景之间共享&#xff0c;适合用于需要在游戏不同场景之间传递和保持的数据。 它利用key-value的方式将数据保存到本地&#xff0c;跟字典类似。然后通…
阅读更多...
【排序算法】详解直接插入排序和希尔排序原理及其性能分析

【排序算法】详解直接插入排序和希尔排序原理及其性能分析

文章目录 插入排序算法原理细节分析代码实现复杂度分析:稳定性分析:与冒泡排序的对比 希尔排序算法原理细节分析代码实现复杂度分析稳定性分析 总结对比 插入排序 算法原理 插入排序又或者说直接插入排序,是一种和冒泡排序类似的并且比较简单的排序方法&#xff0c; 基本思想…
阅读更多...
android aidl Can‘t resolve Salary问题

android aidl Can‘t resolve Salary问题

** 解决方法 ** 在数据aidl中写上包名&#xff0c;并且保证他的实体类也应当在与数据aidl文件相同的java类的包下 如果实例类放在aidl文件中会报一些稀奇古怪的错误&#xff0c;可以生成.java文件但是里面的实体类是不能识别的
阅读更多...
Swagger使用

Swagger使用

Swagger 简介 号称世界上最流行的API框架&#xff1b;Restful API 文档在线生成工具 —> API文档与API定义同步更新直接运行&#xff0c;可以在线测试 API 接口&#xff1b;支持各种语言&#xff1b;&#xff08;Java&#xff0c;PHP…&#xff09; 官网 Spring Boot 集…
阅读更多...
BUUCTF学习(5): 命令执行Ping

BUUCTF学习(5): 命令执行Ping

1、介绍 2、解题 127.0.0.1|cat /flag 结束
阅读更多...
Unity-3D模型展示

Unity-3D模型展示

将3D模型放置到某个位置&#xff0c;然后通过鼠标左键进行旋转的操作 一种方法是添加另外的相机&#xff0c;采用RenderTexture来渲染该相机的内容 那么RenderTexture是做什么的呢&#xff1f; RenderTexture可以捕获从摄像机、光源和其他对象渲染的图像&#xff0c;并将结果…
阅读更多...
如何使用FME开发自动化分析报告功能

如何使用FME开发自动化分析报告功能

目录 前言 一、使用的技术栈 二、技术难点解析 1.专题图 2.WORD文档实现 2.1 动态标题 2.3动态表格和文本 2.3专题图插入 三、完成NewGIS部署 四、模板总览图 总结 前言 一个标准项目分析报告需要需要包括3个方面&#xff1a; 文本叙述&#xff0c;主要体现在对某项专项数据的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023