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

掌握 DOM 操作：让你的网页动起来

news 2026/3/29 19:17:50

文章目录

  • 前言
  • 一、什么是 DOM？
  • 二、DOM 树的结构
  • 三、使用 JavaScript 操作 DOM
  • 总结

前言

在现代 Web 开发中，动态交互几乎是每个网站的标配。而这种交互的实现，离不开 DOM（Document Object Model） 的操作。本次课程深入讲解了 DOM 的基础知识以及如何使用 JavaScript 操作 DOM，让我们通过详细的总结和实战案例，带你快速掌握这项核心技能！

一、什么是 DOM？

DOM（文档对象模型） 是一种以树状结构表示网页内容的编程接口。通过 DOM，我们可以使用 JavaScript 对网页的结构、样式和内容进行动态修改。

DOM 的特点

  • 以树状结构表示： 每个 HTML 元素都是树上的一个节点。
  • 可编程： 通过 JavaScript 操作 DOM，动态修改网页内容。
  • 实时更新： 所有 DOM 操作都会立即反映在网页上。

二、DOM 树的结构

DOM 的核心是将 HTML 文档解析成树状结构。以下是一个简单的 HTML 示例及其对应的 DOM 树结构：

示例 HTML

<!DOCTYPE html>
<html><head><title>My Website</title></head><body><h1>Hello World</h1><p>Wollongong</p></body>
</html>

对应的 DOM 树
Document
├── <html>
│   ├── <head>
│   │   └── <title> "My Website"
│   └── <body>
│       ├── <h1> "Hello World"
│       └── <p> "Wollongong"

在这个结构中，每个 HTML 元素（如 、）都是一个 节点，文本内容（如 “Hello World”）是 文本节点。

三、使用 JavaScript 操作 DOM

通过 JavaScript，我们可以对 DOM 进行以下操作：

1.选择节点
2.修改节点
3.创建新节点
4.删除节点
5.动态添加事件
以下是常见的 DOM 操作方法及其用法：

  1. 选择节点
    通过 ID 选择：
    使用 document.getElementById(id) 选择特定 ID 的元素。
var element = document.getElementById("myId");

通过标签名选择：
使用 document.getElementsByTagName(tagName) 选择所有指定标签的元素。

var elements = document.getElementsByTagName

相关文章：

掌握 DOM 操作：让你的网页动起来

文章目录 前言一、什么是 DOM？二、DOM 树的结构三、使用 JavaScript 操作 DOM总结前言 在现代 Web 开发中，动态交互几乎是每个网站的标配。而这种交互的实现，离不开 DOM（Document Object Model） 的操作。本次课程深入讲解了 DOM 的基础知识以及如何使用 JavaScript 操作 …...

编程日记 2024/12/9 8:22:27

JVM整理部分面试题

1.如何主动触发垃圾回收&#xff1f; 在Java中&#xff0c;垃圾回收是自动进行的&#xff0c;由Java虚拟机&#xff08;JVM&#xff09;负责管理。但是&#xff0c;有时候我们可能希望手动触发垃圾回收以释放一些无用的对象。这可以通过调用System.gc()方法来实现 手动触发垃…...

编程日记 2024/12/9 8:19:22

ubuntu20 使用 pyspacemouse获取 spacemouse wireless 输入

1. 设置设备权限 (1) 默认情况下&#xff0c;普通用户可能没有权限访问 HID 设备&#xff0c;可以通过设置 udev 规则解决&#xff1a; cd /etc/udev/rules.d sudo touch 99-spacemouse.rules sudo gedit 99-spacemouse.rules在新建的99-spacemouse.rules中添加以下内容 SUB…...

编程日记 2024/12/9 8:17:20

windows下Qt5自动编译配置QtMqtt环境（11）

文章目录 [toc]1、概述2、准备1.1 下载源码1.2 配置环境1.3 解释原理 3、编译4、验证5、参考6、视频 更多精彩内容&#x1f449;内容导航 &#x1f448;&#x1f449;Qt网络编程 &#x1f448; 1、概述 Qt默认是不包含mqtt库的&#xff0c;如果需要使用到mqtt库就只能自己编译配…...

编程日记 2024/12/9 8:13:15

速盾：高防cdn有哪些冷知识？

高防CDN&#xff08;Content Delivery Network&#xff09;是一种用于提供高可靠性、高性能的互联网服务的技术。它通过将内容分发到离用户最近的服务器上&#xff0c;并优化网络流量&#xff0c;以提升网站的响应速度和承载能力。除了这些基本的了解&#xff0c;下面是一些高防…...

编程日记 2024/12/9 8:12:14

全面UI组件库Telerik 2024 Q4全新发布——官方宣布支持.NET 9

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库&#xff0c;加快开发速度。Telerik DevCraft提供最完整的工具箱&#xff0c;用于构建现代和面向未来的业务应用程序&#xff0c;目前提供UI for ASP.NET MVC、Ken…...

编程日记 2024/12/9 8:09:11

电脑投屏到电脑：Windows，macOS及Linux系统可以相互投屏！

本篇其实是电脑远程投屏到另一台电脑的操作介绍。本篇文章的方法可用于Windows&#xff0c;macOS及Linux系统的相互投屏。 为了避免介绍过程中出现“这台电脑”投屏到“那台电脑”的混乱表述&#xff0c;假定当前屏幕投出端是Windows系统电脑&#xff0c;屏幕接收端是Linux系统…...

编程日记 2024/12/9 8:04:07

12.6深度学习_模型优化和迁移_模型移植

八、模型移植 1. 认识ONNX ​ https://onnx.ai/ ​ Open Neural Network Exchange&#xff08;ONNX&#xff0c;开放神经网络交换&#xff09;格式&#xff0c;是一个用于表示深度学习模型的标准&#xff0c;可使模型在不同框架之间进行转移。 ​ ONNX的规范及代码主要由微软…...

编程日记 2024/12/9 8:03:06

Grid++Report:自定义模板设计（自由表格使用），详细教程

实现效果 步骤 一、新建空白 初始状态都是空白页&#xff0c;如果不是&#xff0c;点击右上角->文件->新建空白 二、页面设置 右击页面灰色部分->页面设置 根据需求自定义页面 三、报表头设计 1、新增报表头 右击屏幕->新增->报表节->报表头 点击报表头…...

编程日记 2024/12/9 8:01:01

[Collection与数据结构] 位图与布隆过滤器

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…...

编程日记 2024/12/9 7:57:57

idea中新建一个空项目

目的&#xff0c;为了在同一个目录下有多个小的项目&#xff1a;使用IDE为idea2022。 步骤&#xff1a; 点击新建项目&#xff0c;点击创建空项目&#xff0c;这里选择空项目是将其作为其他项目的一个容器&#xff0c;如图所示&#xff1a; 然后点击文件->项目结构&#xf…...

编程日记 2024/12/9 7:56:57

【Python】【Conda 】Conda 与 venv 虚拟环境优缺点全解：如何做出明智选择

目录 引言一、基本概念1.1 Conda 虚拟环境1.2 Python venv 虚拟环境 二、主要区别对比三、优缺点分析3.1 Conda 虚拟环境的优缺点3.2 Python venv 虚拟环境的优缺点 四、使用场景推荐4.1 使用 Conda 虚拟环境的场景4.2 使用 Python venv 虚拟环境的场景 五、虚拟环境管理工具对…...

编程日记 2024/12/9 7:55:56

深度学习在故障检测中的应用：从理论到实践

随着工业设备和信息系统的复杂性增加&#xff0c;故障检测成为企业运维的重要任务。然而&#xff0c;传统的基于规则或统计学的故障检测方法难以应对复杂多变的故障模式。深度学习作为一种强大的数据分析工具&#xff0c;为故障检测提供了新的解决思路。本文将介绍深度学习模型…...

编程日记 2024/12/9 7:53:53

自然语言处理与人工智能

自然语言处理&#xff08;NLP&#xff09;与人工智能&#xff08;AI&#xff09; 自然语言处理&#xff08;NLP&#xff09;是人工智能&#xff08;AI&#xff09;领域的一个重要分支&#xff0c;旨在使计算机能够理解、解释和生成自然语言。随着深度学习技术的进步&#xff0…...

编程日记 2024/12/9 7:51:51

量化交易系统开发-实时行情自动化交易-8.15.Ptrade/恒生平台

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来会对于Ptrade/恒生平台介绍。 P…...

编程日记 2024/12/9 7:46:42

非常简单实用的前后端分离项目-仓库管理系统（Springboot+Vue）part 4

三十三、出入库管理 Header.vue导一下,RecordController加一个 //将入库数据和原有数据相加吧//新增PostMapping("/save")public Result save(RequestBody Record record) {return recordService.save(record) ? Result.success() : Result.fail();} GoodsManage.v…...

编程日记 2024/12/9 7:45:40

基于MATLAB的信号处理工具：信号分析器

信号&#xff08;或时间序列&#xff09;是与特定时间相关的一系列数字或测量值&#xff0c;不同的行业和学科将这一与时间相关的数字序列称为信号或时间序列。生物医学或电气工程师会将其称为信号&#xff0c;而统计学家或金融定量分析师会使用时间序列这一术语。例如&#xf…...

编程日记 2024/12/9 7:44:38

Codeforces Round 784 (Div. 4)

题目链接 A. Division? 题意 思路 模拟即可 示例代码 void solve() {int n;cin >> n;int ans;if(n > 1900) ans 1;else if(n > 1600) ans 2;else if(n > 1400) ans 3;else ans 4;cout << "Division " << ans << \n;}B. T…...

编程日记 2024/12/9 7:40:35

OpenNebula 开源虚拟平台,对标 VMware

Beeks Group 主要为金融服务提供商提供虚拟专用服务器和裸机服务器。该公司表示&#xff0c;转向 OpenNebula 不仅大幅降低了成本&#xff0c;还使其虚拟机效率提升了 200%&#xff0c;并将更多裸机服务器资源用于客户端负载&#xff0c;而非像以往使用 VMware 时那样用于虚拟机…...

编程日记 2024/12/9 7:39:33

软件项目标书参考，合同拟制，开发合同制定，开发协议，标书整体技术方案，实施方案，通用套用方案，业务流程，技术架构，数据库架构全资料下载（原件）

1、终止合同协议书 2、项目合作协议 3、合同交底纪要 4、合同管理台账 软件资料清单列表部分文档清单&#xff1a;工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&#xff0c;需求调研计划&#xff0c;用户需求调查单&…...

编程日记 2024/12/9 7:37:31

从‘玩具项目’到‘线上产品’：我的Vue3项目在阿里云ECS上线的完整踩坑记录（含Nginx配置）

从本地开发到云端部署&#xff1a;Vue3项目实战全流程解析 第一次将自己的Vue项目部署到线上时&#xff0c;我盯着浏览器里那个404错误页面整整发呆了十分钟。作为一个刚完成基础学习的开发者&#xff0c;我原以为按照教程一步步操作就能顺利上线&#xff0c;但现实却给了我当头…...

编程新知 2026/3/29 18:39:29

别再到处找安装包了！Win10下Apache 2.4保姆级安装与配置（附网盘资源）

Win10下Apache 2.4终极安装指南&#xff1a;从零避坑到高效部署 第一次在Windows上配置Apache服务器时&#xff0c;我盯着命令行里反复出现的"Syntax error"提示整整两小时——直到发现是因为配置文件里少了个引号。这种看似简单的环境搭建&#xff0c;往往藏着无数…...

编程新知 2026/3/29 17:53:10

Q345A、Q345B、Q345C、Q345D、Q345E钢材的性能差异分析

Q345A、Q345B、Q345C、Q345D、Q345E 钢材的性能差异分析 Q345是一种钢材的材质。它是低合金钢（C<0.2%)，广泛应用于建筑，桥梁、车辆、船舶、压力容器等。Q代表的是这种材质的屈服强度，后面的345，就是指这种材质的屈服值，在345MPa左右。并会随着材质的厚度的增加而使其…...

编程新知 2026/3/29 17:41:09

智能家居集成终极指南：海尔设备互联互通的完整解决方案

智能家居集成终极指南&#xff1a;海尔设备互联互通的完整解决方案 【免费下载链接】haier 项目地址: https://gitcode.com/gh_mirrors/ha/haier 在智能家居快速发展的今天&#xff0c;设备互联互通已成为提升用户体验的关键。本文将详细介绍如何通过开源项目实现海尔智…...

编程新知 2026/3/29 16:44:28

如何用3层智能架构构建你的AI开发助手：从零到精通的完整指南

如何用3层智能架构构建你的AI开发助手&#xff1a;从零到精通的完整指南 【免费下载链接】superpowers Claude Code superpowers: core skills library 项目地址: https://gitcode.com/GitHub_Trending/su/superpowers 你是否曾想过&#xff0c;为什么有些开发者能快速完…...

编程新知 2026/3/29 16:32:26

AI芯片算力揭秘：从INT8到FP16，如何正确理解不同精度的TOPS值？

AI芯片算力揭秘&#xff1a;从INT8到FP16&#xff0c;如何正确理解不同精度的TOPS值&#xff1f; 当你在选购AI加速卡时&#xff0c;是否曾被厂商宣传的"200TOPS算力"搞得晕头转向&#xff1f;作为在边缘计算部署过数十个模型的工程师&#xff0c;我必须告诉你一个残…...

编程新知 2026/3/29 15:13:53

告别纸上谈兵：在Multisim里调试交通灯仿真时，我踩过的这些坑希望你避开

告别纸上谈兵&#xff1a;在Multisim里调试交通灯仿真时&#xff0c;我踩过的这些坑希望你避开 第一次在Multisim里搭建完整的交通灯控制系统时&#xff0c;我以为只要按照教科书上的电路图连接好芯片和元件&#xff0c;仿真就能一帆风顺。但现实给了我当头一棒——数码管显示乱…...

编程新知 2026/3/29 14:27:34

告别串口调试助手：用Chrome浏览器直接调试Arduino/ESP32（Web Serial API实战）

浏览器直连硬件&#xff1a;Web Serial API在物联网开发中的高阶应用 每次调试Arduino或ESP32设备时&#xff0c;那些繁琐的串口助手切换、驱动安装和兼容性问题是否让您感到疲惫&#xff1f;现在&#xff0c;只需一个Chrome浏览器窗口&#xff0c;就能完成从设备连接到数据可…...

编程新知 2026/3/29 14:21:29

Spring_couplet_generation 学术研究价值：作为NLP文本生成任务的基准

Spring_couplet_generation&#xff1a;一个衡量NLP模型中文创作能力的基准任务 春联&#xff0c;作为中国传统文化的独特载体&#xff0c;其创作要求严格遵循平仄、对仗和意境的规则。这看似简单的红纸黑字&#xff0c;背后却蕴含着对语言韵律、语义对偶和美学意境的综合考验…...

编程新知 2026/3/29 12:12:03

开源工具管理效率提升使用指南

开源工具管理效率提升使用指南 【免费下载链接】xcom2-launcher The Alternative Mod Launcher (AML) is a replacement for the default game launchers from XCOM 2 and XCOM Chimera Squad. 项目地址: https://gitcode.com/gh_mirrors/xc/xcom2-launcher 开源工具管理…...

编程新知 2026/3/29 11:45:39