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

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

news 2026/2/11 0:35:58

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

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/2/3 4:26:32

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54