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

DOM 操作入门：HTML 元素操作与页面事件处理

news 2025/7/9 1:07:12

DOM 操作入门：HTML 元素操作与页面事件处理

  • DOM 操作入门：HTML 元素操作与页面事件处理
    • 什么是 DOM？
    • 1. 如何操作 HTML 元素？
      • 1.1 使用 `document.getElementById()` 获取单个元素
      • 1.2 使用 `document.querySelector()` 和 `document.querySelectorAll()` 获取多个元素
      • 1.3 创建和删除 HTML 元素
      • 1.4 修改 HTML 属性和样式
    • 2. 如何处理页面事件？
      • 2.1 常见的事件类型
      • 2.2 使用 `addEventListener()` 绑定事件
      • 2.3 处理表单提交事件
      • 2.4 使用 `removeEventListener()` 解除事件监听
    • 3. 高级技巧
      • 3.1 DOM 操作的性能优化
      • 3.2 使用 MutationObserver 监视 DOM 变化
    • 总结

DOM 操作入门：HTML 元素操作与页面事件处理

在现代 web 开发中，DOM（文档对象模型）操作是前端开发者必须掌握的核心技能。无论是修改 HTML 结构、操作 CSS 样式还是处理用户交互事件，都需要通过 DOM 来实现。对于刚接触前端开发的新手来说，理解 DOM 操作可能会显得有些复杂，但只要掌握了基本概念和常用方法，就能轻松上手。

什么是 DOM？

DOM（Document Object Model）是 web 文档的标准接口。它将 HTML 和 XML 文档表示为对象的层次结构，使得开发者可以通过 JavaScript 来操作网页内容、样式和结构。

简单来说，DOM 允许我们在 JavaScript 中访问和修改 HTML 元素及其属性，并且可以对页面事件进行监听和处理。

通过 DOM，我们可以实现动态网页效果，比如响应用户交互、更新页面内容等。

1. 如何操作 HTML 元素？

在 JavaScript 中，最常见的任务之一就是操作 DOM。要操作某个元素，首先需要找到它。DOM 提供了许多方法来选择元素，包括以下几种方式：

1.1 使用 document.getElementById() 获取单个元素

document.getElementById() 方法用于通过元素的 ID 属性获取单个 HTML 元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>DOM 操作入门</title>
</head>
<body><h1 id="mainTitle">欢迎学习 DOM 操作！</h1><script>// 通过 ID 获取元素const title = document.getElementById('mainTitle');console.log(title); // 输出: <h1>欢迎学习 DOM 操作！</h1>// 修改元素内容title.textContent = 'DOM 操作很简单！';</script>
</body>
</html>

1.2 使用 document.querySelector() 和 document.querySelectorAll() 获取多个元素

querySelector() 方法用于通过 CSS 选择器获取单个匹配的元素，而 querySelectorAll() 则返回所有匹配的元素集合。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>DOM 操作入门</title>
</head>
<body><div class="container"><p id="para1">第一个段落。</p><p id="para2">第二个段落。</p><p id="para3">第三个段落。</p></div><script>// 通过 CSS 选择器获取元素const para = document.querySelector('.container p');console.log(para); // 输出: 第一个匹配的 <p> 元素// 获取多个元素const paras = document.querySelectorAll('.container p');paras.forEach(p => {console.log(p.textContent);});</script>
</body>
</html>

1.3 创建和删除 HTML 元素

使用 document.createElement

相关文章：

DOM 操作入门：HTML 元素操作与页面事件处理

DOM 操作入门：HTML 元素操作与页面事件处理 DOM 操作入门：HTML 元素操作与页面事件处理什么是 DOM？1. 如何操作 HTML 元素？1.1 使用 `document.getElementById()` 获取单个元素1.2 使用 `document.querySelector()` 和 `document.querySelectorAll()` 获取多个元素1.3 创建…...

编程日记 2025/2/4 13:05:27

使用 HTTP::Server::Simple 实现轻量级 HTTP 服务器

在Perl中&#xff0c;HTTP::Server::Simple 模块提供了一种轻量级的方式来实现HTTP服务器。该模块简单易用&#xff0c;适合快速开发和测试HTTP服务。本文将详细介绍如何使用 HTTP::Server::Simple 模块创建和配置一个轻量级HTTP服务器。 安装 HTTP::Server::Simple 首先&…...

编程日记 2025/2/4 13:01:23

C++滑动窗口技术深度解析：核心原理、高效实现与高阶应用实践

目录 一、滑动窗口的核心原理 二、滑动窗口的两种类型 1. 固定大小的窗口 2. 可变大小的窗口 三、实现细节与关键点 1. 窗口的初始化 2. 窗口的移动策略 3. 结果的更新时机 四、经典问题与代码示例 示例 1&#xff1a;和 ≥ target 的最短子数组&#xff08;可变窗口…...

编程日记 2025/2/4 12:59:21

基于构件的软件开发方法

摘要： 本人在2023年1月参与广东某公司委托我司开发的“虚拟电厂”项目，主要负责整体架构设计和中间件的选型，该项目为新型电力存储、电力调度、能源交易提供一整套的软件系统，包括设备接入、负载预测、邀约竞价、用户设备调控等功能。本项目以“虚拟电厂”项目为例，讨论基…...

编程日记 2025/2/4 12:51:11

网站快速收录：如何设置robots.txt文件？

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/34.html 为了网站快速收录而合理设置robots.txt文件&#xff0c;需要遵循一定的规则和最佳实践。robots.txt文件是一个纯文本文件&#xff0c;它告诉搜索引擎爬虫哪些页面可以访问&#xff…...

编程日记 2025/2/4 12:50:10

OpenGL学习笔记（六）：Transformations 变换（变换矩阵、坐标系统、GLM库应用）

文章目录 向量变换使用GLM变换&#xff08;缩放、旋转、位移&#xff09;将变换矩阵传递给着色器坐标系统与MVP矩阵三维变换绘制3D立方体 & 深度测试&#xff08;Z-buffer&#xff09;练习1——更多立方体 现在我们已经知道了如何创建一个物体、着色、加入纹理。但它们都还…...

编程日记 2025/2/4 12:45:03

8.攻防世界Web_php_wrong_nginx_config

进入题目页面如下 尝试弱口令密码登录 一直显示网站建设中&#xff0c;尝试无果&#xff0c;查看源码也没有什么特别漏洞存在 用Kali中的dirsearch扫描根目录试试 命令&#xff1a; dirsearch -u http://61.147.171.105:53736/ -e* 登录文件便是刚才登录的界面打开robots.txt…...

编程日记 2025/2/4 12:42:00

【优先算法】专题——位运算

在讲解位运算之前我们来总结一下常见的位运算 一、常见的位运算 1.基础为运算 << &&#xff1a;有0就是0 >> |&#xff1a;有1就是1 ~ ^&#xff1a;相同为0&#xff0c;相异位1 /无进位相加 2.给一个数 n&#xff0c;确定它的二进制表示…...

编程日记 2025/2/4 12:38:57

qt.qpa.plugin: Could not find the Qt platform plugin “dxcb“ in ““

个人博客地址&#xff1a;qt.qpa.plugin: Could not find the Qt platform plugin "dxcb" in "" | 一张假钞的真实世界 我遇到的场景是&#xff0c;在Deepin系统终端中运行PySide应用时&#xff0c;没有错误提示&#xff0c;但在VS Code中运行时&#xff…...

编程日记 2025/2/4 12:36:53

1-刷力扣问题记录

25.1.19 1.size()和.length()有什么区别 2.result.push_back({nums[i], nums[left], nums[right]});为什么用大括号&#xff1f; 使用大括号 {} 是 C11 引入的 初始化列表 语法&#xff0c;它允许我们在构造或初始化对象时直接传入一组值。大括号的使用在许多情况下都能让代码…...

编程日记 2025/2/4 12:35:52

物联网 STM32【源代码形式-使用以太网】连接OneNet IOT从云产品开发到底层MQTT实现，APP控制 【保姆级零基础搭建】

物联网&#xff08;IoT&#xff09;‌是指通过各种信息传感器、射频识别技术、全球定位系统、红外感应器等装置与技术&#xff0c;实时采集并连接任何需要监控、连接、互动的物体或过程&#xff0c;实现对物品和过程的智能化感知、识别和管理。物联网的核心功能包括数据采集与监…...

编程日记 2025/2/4 12:30:42

【单层神经网络】基于MXNet的线性回归实现（底层实现）

写在前面 基于亚马逊的MXNet库本专栏是对李沐博士的《动手学深度学习》的笔记&#xff0c;仅用于分享个人学习思考以下是本专栏所需的环境&#xff08;放进一个environment.yml&#xff0c;然后用conda虚拟环境统一配置即可&#xff09;刚开始先从普通的寻优算法开始&#xff…...

编程日记 2025/2/4 12:27:37

unity中的动画混合树

为什么需要动画混合树&#xff0c;动画混合树有什么作用&#xff1f; 在Unity中&#xff0c;动画混合树&#xff08;Animation Blend Tree&#xff09;是一种用于管理和混合多个动画状态的工具&#xff0c;包括1D和2D两种类型&#xff0c;以下是其作用及使用必要性的介绍&…...

编程日记 2025/2/4 12:26:36

《基于deepseek R1开源大模型的电子数据取证技术发展研究》

《基于deepseek R1开源大模型的电子数据取证技术发展研究》 摘要 本文探讨了基于deepseek R1开源大模型的电子数据取证技术发展前景。随着人工智能技术的快速发展&#xff0c;AI大模型在电子数据取证领域的应用潜力日益凸显。本研究首先分析了电子数据取证的现状和挑战&#xf…...

编程日记 2025/2/4 12:24:31

Potplayer常用快捷键

Potplayer是一个非常好用的播放器,功能强大 功能快捷键播放/暂停空格键退出Esc下一帧F上一帧D快进10秒→快退10秒←快进30秒Ctrl →快退30秒Ctrl ←快进1分钟Alt →快退1分钟Alt ←增加播放速度C减少播放速度X恢复正常速度Z增加音量↑减少音量↓静音M显示/隐藏字幕Ctrl A…...

编程日记 2025/2/4 12:23:27

C++ Primer 自定义数据结构

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

编程日记 2025/2/4 12:21:25

35.Word：公积金管理中心文员小谢【37】

目录 Word1.docx ​ Word2.docx Word2.docx ​ 注意本套题还是与上一套存在不同之处 Word1.docx 布局样式的应用设计页眉页脚位置在水平/垂直方向上均相对于外边距居中排列&#xff1a;格式→大小对话框→位置→水平/垂直 按下表所列要求将原文中的手动纯文本编号分别替换…...

编程日记 2025/2/4 12:15:18

北京钟鼓楼：立春“鞭春牛”，钟鼓迎春来

仁风导和气,勾芒御昊春。“钟鼓迎春”立春鞭春牛民俗体验活动于立春当日在北京钟鼓楼隆重举办。此次活动由北京市钟鼓楼文物保管所主办,京睿文(北京)文化科技有限公司承办,通过礼官报春、击鼓鸣钟、春娃喊春、中国时间文化角色巡游、鞭春牛等一系列精彩的活动环节,为观众呈现了…...

编程日记 2025/2/4 12:13:15

股票入门知识

股票入门&#xff08;更适合中国宝宝体制&#xff09; 股市基础知识 本文介绍了股票的基础知识&#xff0c;股票的分类&#xff0c;各板块发行上市条件&#xff0c;股票代码&#xff0c;交易时间&#xff0c;交易规则&#xff0c;炒股术语&#xff0c;影响股价的因素&#xf…...

编程日记 2025/2/4 12:11:09

Java自定义IO密集型和CPU密集型线程池

文章目录 前言线程池各类场景描述常见场景案例设计思路公共类自定义工厂类-MyThreadFactory自定义拒绝策略-RejectedExecutionHandlerFactory自定义阻塞队列-TaskQueue&#xff08;实现 核心线程->最大线程数->队列&#xff09; 场景1&#xff1a;CPU密集型场景思路&…...

编程日记 2025/2/4 12:10:06

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/8 0:54:17

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/7/8 17:31:25

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/7/7 1:07:56

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/7/5 20:33:39

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/7/6 17:04:20

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/7/5 5:13:16

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/7/8 6:17:35

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/7/6 15:38:55