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

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

news 2026/5/16 1:56:06

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

168.YOLOv8零基础直达实战｜COCO128+CU118环境+完整注释代码

摘要 YOLO（You Only Look Once）系列算法是目标检测领域最主流的实时检测框架，从v1到v8经历了多次架构迭代与性能飞跃。本文旨在提供一份零基础直达实战的完整指南，不依赖任何图片，仅通过逻辑推导与代码实现，帮助读者掌握YOLO的核心原理、环境搭建、模型训练、推理部署及…...

编程新知 2026/5/16 1:44:26

企业微信社群运营太耗人力？API自动化方案实战分享

通过 QiWe API RPA 自动化能力&#xff0c;实现企业微信社群从拉群、维护到触达的全流程自动化运营。社群运营在私域体系中很重要&#xff0c;但也是最“吃人力”的环节之一&#xff1a;拉群、邀请客户全靠人工群公告、活动通知重复发送群成员管理耗时且容易出错多个社群需要反…...

编程新知 2026/5/16 1:32:16

Spread.NET 10-19.1 都可以提供

关于 Spread.NET提供类似 Excel 的电子表格体验。Spread.NET 可帮助您创建电子表格、网格、仪表板和窗体。它包含一个强大的计算引擎&#xff0c;提供 450 多个函数&#xff0c;并支持导入和导出 Excel 电子表格。利用丰富的 .NET 电子表格 API 和强大的计算引擎&#xff0c;您…...

编程新知 2026/5/16 1:02:28

STM32H743以太网实战：基于CubeMX 6.8.0与LAN8720的LWIP移植避坑指南

1. 环境准备与CubeMX基础配置 折腾了一周终于把STM32H743的以太网调通&#xff0c;发现网上大多数教程都存在配置遗漏。这里分享我的完整配置流程&#xff0c;从CubeMX安装到最终Ping通&#xff0c;每个步骤都经过实测验证。 首先确保安装STM32CubeMX 6.8.0和对应的HAL库。我遇…...

编程新知 2026/5/15 23:22:46

模块四-数据转换与操作——29. 透视表与交叉表

29. 透视表与交叉表 1. 概述 透视表&#xff08;Pivot Table&#xff09;和交叉表&#xff08;Crosstab&#xff09;是数据汇总的强大工具&#xff0c;类似于 Excel 中的数据透视表。它们可以将数据按照行和列进行分组聚合&#xff0c;快速生成汇总报表。 import pandas as …...

编程新知 2026/5/15 23:20:41

终极Windows热键冲突解决方案：Hotkey Detective一键定位占用程序

终极Windows热键冲突解决方案&#xff1a;Hotkey Detective一键定位占用程序 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective …...

编程新知 2026/5/15 20:43:23

BilibiliDown：如何轻松下载B站视频的终极免费工具指南

BilibiliDown&#xff1a;如何轻松下载B站视频的终极免费工具指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/b…...

编程新知 2026/5/15 20:32:46

NotebookLM生物学研究辅助落地手册（实验室已验证的7个不可公开的Prompt工程模板）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM生物学研究辅助落地手册&#xff08;实验室已验证的7个不可公开的Prompt工程模板&#xff09; NotebookLM 作为 Google 推出的文档感知型 AI 助手&#xff0c;在分子生物学、结构生物学与高通…...

编程新知 2026/5/15 19:10:05

告别繁琐部署：VS2022一站式打包WinForm应用为独立安装包

1. 为什么需要一站式打包WinForm应用&#xff1f; 每次开发完WinForm应用后&#xff0c;最头疼的就是怎么把程序交给用户使用。直接发个Debug文件夹&#xff1f;用户可能会遇到各种问题&#xff1a;缺少.NET运行环境、依赖的DLL文件丢失、注册表没配置...作为开发者&#xff0c…...

编程新知 2026/5/15 18:15:09

Arthas实战：用watch和tt命令‘时光倒流’，精准复现和调试那个偶现的线上Bug

Arthas实战&#xff1a;用watch和tt命令‘时光倒流’&#xff0c;精准复现和调试那个偶现的线上Bug 线上环境偶现的Bug就像幽灵一样难以捉摸——测试环境无法复现&#xff0c;日志信息又残缺不全。作为一名开发者&#xff0c;你是否经历过这样的绝望时刻&#xff1f;当用户反馈…...

编程新知 2026/5/15 18:10:53