【Java 进阶篇】JavaScript DOM 编程:理解文档对象模型

在这里插入图片描述

在 web 开发中,DOM(文档对象模型)是一个重要的概念。DOM 是一种将网页文档表示为树状结构的方式,允许开发者使用 JavaScript 来访问和操作网页的内容。本篇博客将详细介绍 DOM,包括什么是 DOM、如何访问 DOM 元素、如何操作 DOM、DOM 事件等。无论你是刚刚入门 web 开发还是希望深入了解 DOM,这篇博客都将对你有所帮助。

什么是 DOM?

DOM 是 Document Object Model(文档对象模型)的缩写。它是一种编程接口,允许开发者使用脚本语言(通常是 JavaScript)来访问和修改网页的内容。DOM 将网页表示为一个树状结构,每个部分都是一个对象,这些对象可以被脚本语言访问和操纵。

DOM 的树状结构如下所示:

请添加图片描述

  • 文档(Document)是整个网页的根节点。
  • 元素(Element)是文档中的标签,如 <div><p><a>
  • 属性(Attribute)是元素的特性,如 idclass
  • 文本(Text)是元素中的文本内容。

如何访问 DOM 元素?

要访问 DOM 元素,你需要使用 JavaScript。下面是一些基本的方法来获取 DOM 元素:

1. 通过 ID 获取元素

var element = document.getElementById("myElement");

上面的代码会获取具有 id 属性为 “myElement” 的元素。

2. 通过标签名获取元素

var elements = document.getElementsByTagName("p");

上面的代码将获取所有 <p> 元素。

3. 通过类名获取元素

var elements = document.getElementsByClassName("myClass");

上面的代码将获取所有 class 属性为 “myClass” 的元素。

4. 通过选择器获取元素

var element = document.querySelector("#myElement");

上面的代码将获取具有 id 属性为 “myElement” 的元素。querySelector 还支持更复杂的选择器。

5. 通过父元素获取子元素

var parentElement = document.getElementById("parent");
var childElement = parentElement.querySelector(".child");

上面的代码首先获取具有 id 属性为 “parent” 的元素,然后从该元素中获取具有 class 属性为 “child” 的子元素。

如何操作 DOM?

一旦你获取了 DOM 元素,你就可以对其进行各种操作。以下是一些常见的 DOM 操作:

1. 改变元素的文本内容

var element = document.getElementById("myElement");
element.innerHTML = "新的文本内容";

上面的代码将改变 id 为 “myElement” 的元素的文本内容。

2. 改变元素的样式

var element = document.getElementById("myElement");
element.style.color = "red";

上面的代码将改变 id 为 “myElement” 的元素的文本颜色为红色。

3. 添加和移除 CSS 类

var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");

上面的代码将为 id 为 “myElement” 的元素添加一个新的 CSS 类,并移除一个旧的 CSS 类。

4. 创建新元素

var newElement = document.createElement("div");
newElement.innerHTML = "新的元素";

上面的代码将创建一个新的 <div> 元素,并设置其文本内容。

5. 添加和移除子元素

var parentElement = document.getElementById("parent");
var childElement = document.createElement("div");
parentElement.appendChild(childElement); // 添加子元素
parentElement.removeChild(childElement); //移除子元素

上面的代码首先获取具有 id 属性为 “parent” 的元素,然后创建一个新的 <div> 元素,并将其作为子元素添加到 “parent” 元素中。随后,使用 removeChild 方法将子元素移除。

6. 修改元素的属性

var element = document.getElementById("myElement");
element.setAttribute("title", "新的标题");

上面的代码将改变 id 为 “myElement” 的元素的 title 属性。

7. 获取元素的属性值

var element = document.getElementById("myElement");
var title = element.getAttribute("title");

上面的代码将获取 id 为 “myElement” 的元素的 title 属性值。

8. 添加事件监听器

var button = document.getElementById("myButton");
button.addEventListener("click", function() {alert("按钮被点击了!");
});

上面的代码将为 id 为 “myButton” 的按钮元素添加一个点击事件监听器,当按钮被点击时,将弹出一个提示框。

DOM 事件

DOM 事件是 web 开发中的一个关键概念,允许开发者对用户与网页的交互作出响应。以下是一些常见的 DOM 事件:

1. click 事件

click 事件在元素被点击时触发。你可以为按钮、链接或其他元素添加 click 事件监听器,以便在用户点击时执行相应的操作。

var button = document.getElementById("myButton");
button.addEventListener("click", function() {alert("按钮被点击了!");
});

2. mouseover 和 mouseout 事件

mouseover 事件在鼠标指针移入元素时触发,而 mouseout 事件在鼠标指针移出元素时触发。这些事件可用于创建悬停效果。

var element = document.getElementById("myElement");
element.addEventListener("mouseover", function() {element.style.backgroundColor = "yellow";
});element.addEventListener("mouseout", function() {element.style.backgroundColor = "white";
});

上面的代码将在鼠标指针移入元素时将元素的背景颜色更改为黄色,而在鼠标指针移出元素时将其还原为白色。

3. keydown 事件

keydown 事件在用户按下键盘上的键时触发。你可以使用这个事件来捕获用户的按键操作,例如输入文本或控制游戏。

document.addEventListener("keydown", function(event) {if (event.key === "Enter") {alert("Enter 键被按下了!");}
});

上面的代码将在用户按下 Enter 键时触发一个提示框。

4. submit 事件

submit 事件在表单提交时触发。你可以使用这个事件来验证用户输入或执行其他操作,然后阻止表单提交或继续提交。

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {if (!validateForm()) {event.preventDefault(); // 阻止表单提交}
});

上面的代码将在表单提交时调用 validateForm 函数来验证用户的输入,如果验证失败,则阻止表单提交。

总结

DOM 是 web 开发中的一个关键概念,它允许开发者使用 JavaScript 来访问和操作网页的内容。通过获取元素、改变文本内容、操作样式、添加事件监听器和处理事件,你可以创建交互性丰富的网页。在深入学习 web 开发时,掌握 DOM 操作是必不可少的一部分。

希望本篇博客能够帮助你更好地理解 DOM,以及如何使用 JavaScript 进行 DOM 编程。

作者信息

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

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

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

相关文章

ESP8285 RTOS SDK OTA

一、官方资源说明 官方指南&#xff1a;空中升级 (OTA) - ESP32 - — ESP-IDF 编程指南 v4.3.6 文档&#xff0c;虽然是正对ESP32的&#xff0c;但是原理是一样的。 官方参考例程&#xff1a;esp-idf\ESP8266_RTOS_SDK\examples\system\ota\&#xff0c;其中包含两个例程&…

Pulsar-Schema 数据结构

Pulsar-Schema 数据结构 为什么需要使用Schema&#xff1f;怎么使用&#xff1f;生产者端消费者端使用用例Schema定义Schema类型基本类型复合类型KeyValue schemaStruct schemaPulsar提供了以下方法来使用结构模式staticgeneric 自动SchemaSchema验证实施Schema演化Schema版本控…

生物标志物发现中的无偏数据分析策略

目录 0. 导论基本概念 1. 生物标志物发现的注意事项2. 数据预处理2.1 高质量原始数据和缺失值处理2.2 数据过滤2.3 数据归一化 3. 数据质量评估3.1 混杂因素3.2 类别分离3.3 功效分析3.4 批次效应 4. 生物标志物发现4.1 策略4.2 数据分析工具4.3 模型优化策略 0. 导论 组学技术…

【具身智能模型1】PaLM-E: An Embodied Multimodal Language Model

论文标题&#xff1a;PaLM-E: An Embodied Multimodal Language Model 论文作者&#xff1a;Danny Driess, Fei Xia, Mehdi S. M. Sajjadi, Corey Lynch, Aakanksha Chowdhery, Brian Ichter, Ayzaan Wahid, Jonathan Tompson, Quan Vuong, Tianhe Yu, Wenlong Huang, Yevgen C…

10.2手动推导linux中file, cdev, inode之间的关系

是时候可以手动推导一下linux里面基类父类和子类的关系了 代码放最后把 简单说明版 详细流程 第一步注册驱动 cdev结构体能看做是一个基类,那么链表里面都是字符设备驱动的cdev连载一起,啥串口,lcd的,通过cdev->list_head连接 那cdev结构体里有主次设备号 第一步 使用r…

SwiftFormer:基于Transformer的高效加性注意力用于实时移动视觉应用的模型

文章目录 摘要1、简介2、相关研究3、方法3.1、注意力模块概述3.2、高效的加性注意力3.3、SwiftFormer 架构4、实验4.1、实现细节4.2、基线比较4.3、图像分类4.4、目标检测和实例分割4.5、语义分割5、结论6、补充材料A、SwiftFormer的架构细节B、其他实现细节C、额外消融D、COCO…

VS2022新建项目时没有ASP.NET Web应用程序 (.NET Framework)

问题&#xff1a;如图&#xff0c;VS2022新建项目时没有“ASP.NET Web应用程序 &#xff08;.NET Framework&#xff09;”的选项解决方法&#xff1a;点击跳转至修改安装选项界面选择安装该项即可&#xff1a;

SpringMVC简介

SpringMVC概述 SpringMVC是一个基于Spring开发的MVC轻量级框架&#xff0c;Spring3.0后发布的组件&#xff0c;SpringMVC可以和Spring无缝整合&#xff0c;使用DispatcherServlet作为前端控制器&#xff0c;且内部提供了处理映射器、处理适配器、视图解析器等组件&#xff0c;…

C# 往多线程传递安全参数的方法

在C#构造一个线程时&#xff0c;要向其传递一个函数&#xff0c;这个函数可以试简单的无参函数&#xff0c;也可以是参数为Object类型的函数&#xff0c;但是由于参数类型为Object&#xff0c;因此编译器无法实行类型检查&#xff0c;看下面的例子&#xff1a; class Program{…

C++学习——C++函数的编译、成员函数的调用、this指针详解

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 从博文的分析中可以看出&#xff0c;对象的内存中只保留了成员变量&#xff0c;除此之外没有任何其他信息&#xff0c;程序运行时不知道 stu 的类型为 Student&#xff0c;也不知道它…

求直角三角形第三点的坐标

文章目录 求直角三角形第三点的坐标1. 原理2. 数学公式3. 推导过程 求直角三角形第三点的坐标 1. 原理 已知内容有&#xff1a; P1、P2 两点的坐标&#xff1b; dis1 为 P1与P2两点之间的距离&#xff1b; dis2 为 P2与P3两点之间的距离&#xff1b; 求解&#xff1a; …

[Springboot]统一响应和异常处理配置

背景 前后端分离情况下&#xff0c;后端接口通常只需要返回JSON数据。 但有时候因为某些原因可能会导致得不到正确的结果。 比如 因为登录密码错误&#xff0c;你不能直接返回错误信息和null&#xff0c;这样前端很难处理。 又比如 因为后端接口爆出了异常&#xff0c;也不能直…

算法通关村第一关-链表青铜挑战笔记

欢迎来到 : 第一关青铜关 java如何创建链表链表怎么增删改查 我们先了解链表 单链表的概念 我们从简单的创建和增删改查开始. 链表的概念 线性表分为顺序表(数组组成)和链表(节点组成) . 链表又分: 单向 双向有哨兵节点 无哨兵节点循环 不循环 链表是一种物理存储单…

计算机毕业设计 高校实习信息发布网站的设计与实现 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

STM32_DMA_多通道采集ADC出现错位现象

STM32_DMA_多通道采集ADC出现错位现象 问题描述&#xff1a; adcSensorValue[0],adcSensorValue[3],adcSensorValue[6]… //存储通道1数据 adcSensorValue[1],adcSensorValue[4],adcSensorValue[7]… //存储通道2数据 adcSensorValue[2],adcSensorValue[5],adcSensorValue[8]……

Git 安装和配置教程:Windows / Mac / Linux 三平台详细图文教程,带你一次性搞定 Git 环境

Git是一款免费、开源的分布式版本控制系统&#xff0c;广泛应用于软件开发领域。随着开源和云计算的发展&#xff0c;Git已经成为了开发者必备的工具之一。本文将为大家介绍Git在Windows、Mac和Linux三个平台上的安装和配置方法&#xff0c;带你一次性搞定Git环境 Windows平台 …

Windows 应用程序监控重启

执行思路 1.定时关闭可执行程序&#xff0c;2.再通过定时监控启动可执行程序 定时启动关闭程序.bat echo off cd "D:\xxxx\" :: 可执行程序目录 Start "" /b xxxx.exe :: 可执行程序 timeout /T 600 /nobreak >nul :: 600秒 taskkill /IM xxxx.exe /…

Docker 容器中固化配置文件

在 Docker 容器中固化配置文件 在 Docker 中&#xff0c;容器是临时的&#xff0c;当容器停止或重新启动时&#xff0c;容器内的任何更改都会丢失。然而&#xff0c;有时我们希望容器内的配置文件在容器重启后仍然保持不变。为了实现这一点&#xff0c;我们可以使用 Docker 的…

mysql面试题47:MySQL中Innodb的事务实现原理

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Innodb的事务实现原理 InnoDB是MySQL中一种常用的存储引擎,它支持事务和行级锁等特性。以下是InnoDB事务实现的简要原理: 事务定义: 事务是指一…

面向C++模块的开源 IFC SDK

早在 VS2019 v16.10 版本的时候&#xff0c;我们就官宣了对 C 模块(以及几乎所有其他 C 20 特性)的全面支持&#xff0c;包括 MSVC 编译器工具集&#xff0c;静态分析&#xff0c;智能感知和调试器等&#xff0c;而实现模块需要将 C 代码实现为一种内部的临时表示形式。 今天&…