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

H5前端开发——DOM

news 2026/2/10 21:28:36

H5前端开发——DOM

在H5前端开发中，DOM（Document Object Model）是一个非常核心的概念，指的是文档对象模型。简单来说，DOM是浏览器将HTML文档转换为一棵树形结构的方式，这样我们可以通过JavaScript脚本语言来操作和修改HTML文档。

DOM模型由节点组成，节点包括元素(ELEMENT NODE)、属性(ATTRIBUTE NODE)、文本(TEXT NODE)等等。通过DOM，我们可以通过JS来获取页面元素、改变元素属性和样式，甚至可以动态地添加和删除元素。

DOM的应用非常广泛，比如在移动端的H5页面中，通过DOM操作可以实现滚动加载更多的效果，在PC端的H5页面中，通过DOM操作可以实现拖拽、选取等效果。此外，还可以使用DOM操作来实现一些特定的交互效果，比如借助jQuery库中的DOM操作方法来实现动画效果。

需要注意的是，在使用DOM操作时，我们要尽量避免频繁地对DOM进行操作，因为每次DOM操作都会引起浏览器的重绘和回流，会降低页面的性能。因此，我们应该尽量减少DOM操作的次数和范围，合理使用缓存和队列等技术手段来优化代码。

总之，DOM是H5前端开发中非常重要的概念，掌握DOM操作技术可以帮助我们更好地实现各种交互效果，提升页面的用户体验和性能。

我们实现两个案列学习一下。
设计要求：
1.全选功能。页面有4个复选框和一个按钮，按钮初始化是不可用状态。实现以下功能：
（1）单击“全选”复选框，同时选中或取消选中运动、唱歌和写代码复选框。
（2）运动、唱歌和写代码复选框都选中时，全选复选框也同时选中。
（3）运动、唱歌和写代码复选框有至少一个未选中时，全选复选框取消选中。
（4）运动、唱歌和写代码复选框有至少一个选中时，“现在提交”按钮可用。
2.二级菜单折叠。通过给定的CSS样式实现以下功能：
单击考勤管理、信息中心和协同办公的任一项，如果当前二级菜单是折叠状态，则展开，同时其余项折叠；如果当前二级菜单状态是展开，则折叠。
3.填写并验证注册信息，具体要求如下：
用户名称：长度4~12，数字英文大小写字母；
密码：长度8~16，大小写字母、数字或下划线；
确认密码：两次密码输入一致，不一致则提示错误；
手机号码：13、14、15、17、18开头的11位手机号；
电子邮箱：用户名@域名（域名后缀至少2个字符）；
所有输入不允许为空。

代码与效果
1.实验代码

①全选功能。页面有4个复选框和一个按钮，按钮初始化是不可用状态。实现以下功能：
（1）单击“全选”复选框，同时选中或取消选中运动、唱歌和写代码复选框。
（2）运动、唱歌和写代码复选框都选中时，全选复选框也同时选中。
（3）运动、唱歌和写代码复选框有至少一个未选中时，全选复选框取消选中。
（4）运动、唱歌和写代码复选框有至少一个选中时，“现在提交”按钮可用。
完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="checkbox" name="fun">运动<input type="checkbox" name="fun">睡觉<input type="checkbox" name="fun">写代码<input type="checkbox" id="allcheck">全选<button disabled>现在提交</button><script>//获取运动唱歌写代码输入框var inputs=document.querySelectorAll('input[name="fun"]');//console.log(inputs);//获取提交按钮var btn=document.querySelector('button');//获取全选框var allcheck=document.getElementById('allcheck');var arr=[];//将运动唱歌写代码input改成数组形式for (let i = 0; i < inputs.length; i++){arr.push(inputs[i]);}//全选功能allcheck.onclick = function() {for (let i =0; i < arr.length; i++){arr[i].checked=this.checked;}//激活提交按钮check();}//任选一个爱好激活提交按钮for (let i = 0;i < arr.length;i++){arr[i].onclick = function(

相关文章：

H5前端开发——DOM

H5前端开发——DOM 在H5前端开发中，DOM（Document Object Model）是一个非常核心的概念，指的是文档对象模型。简单来说，DOM是浏览器将HTML文档转换为一棵树形结构的方式，这样我们可以通过JavaScript脚本语言来操作和修改HTML文档。 DOM模型由节点组成，节点包括元素(ELEM…...

编程日记 2023/10/23 3:45:36

专访 Web3Go 新产品 Reiki：培育 AI 原生数字资产与创意新土壤

从 DeFi 到 NFTFi、SocialFi&#xff0c;web3 从业者在尝试 crypto 与区块链技术能为我们的生活、创作、娱乐和文化带来何种新体验&#xff0c;而生成式人工智能的突破性发展则为我们与链上世界的交互、社区内容创作等带来了新的体验&#xff0c;改变互动、交易和价值创造方式。…...

编程日记 2023/10/23 3:44:34

Docker仓库harbor私服搭建

Harbor和Registry都是Docker的镜像仓库&#xff0c;但是Harbor作为更多企业的选择&#xff0c;是因为相比较于Regisrty来说&#xff0c;它具有很多的优势。 提供分层传输机制&#xff0c;优化网络传输 Docker镜像是是分层的&#xff0c;而如果每次传输都使用全量文件(所以用FT…...

编程日记 2023/10/23 3:43:34

【LangChain系列 11】Prompt模版——拼装组合

原文地址&#xff1a;【LangChain系列 11】Prompt模版——拼装组合 本文速读&#xff1a; 多prompt模版组合 单prompt模版拼装 在平常业务开发中&#xff0c;我们常常需要把一些公共模块提取出来作为一个独立的部分&#xff0c;然后将业务中去将这些模块进行组合。在LLM应用…...

编程日记 2023/10/23 3:42:32

JVM三色标记

三色标记 什么是三色标记法 三色标记法&#xff0c;也被称为Tri-color Marking Algorithm&#xff0c;是一种用于追踪对象存活状态的垃圾回收算法。它基于William D. Hana和Mark S. McCulleghan在1976年提出的两色标记法的基础上进行了改进。 与两色标记法只能将对象标记为“…...

编程日记 2023/10/23 3:41:31

UE5--物体卡片与材质入门

参考资料&#xff1a; 《Unreal Engine5 入门到精通》--左央 虚幻引擎5.2文档&#xff1a;https://docs.unrealengine.com/5.2/zh-CN/ 前言&#xff1a; 跟着左央老师的《Unreal Engine5 入门到精通》学习制作AI版胡闹厨房&#xff0c;把学习过程与学习到的东西归纳总结起来。 …...

编程日记 2023/10/23 3:39:30

ios 实现TEXT、DOC、PDF等文档读取与预览

文章目录 一、前言二、iCould相关配置三、功能实现3.1 UIDocumentPickerViewController 选取控制器3.2 读取文件3.3 文档预览3.3.1 下载并保存3.3.2 QLPreviewController预览文档四、总结一、前言 最近正在研发的项目有一个需求： 允许用户将iCloud中的文档上传，实现文件的流…...

编程日记 2023/10/23 3:38:28

智慧矿山：让AI算法提高未戴安全带识别率！

未穿戴安全带识别AI算法&#xff0c;作为智慧矿山的重要应用之一&#xff0c;不仅可以有效提高矿山工作人员的安全意识&#xff0c;还可以降低事故发生的概率。然而&#xff0c;识别准确率的提高一直是该算法面临的挑战之一。为了解决这个问题&#xff0c;研究人员不断努力探索…...

编程日记 2023/10/23 3:37:26

【Unity程序技巧】公共Update管理器

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…...

编程日记 2023/10/23 3:36:25

Node学习笔记之HTTP 模块

回顾&#xff1a;什么是客户端、什么是服务器&#xff1f; 在网络节点中&#xff0c;负责消费资源的电脑&#xff0c;叫做客户端&#xff1b;负责对外提供网络资源的电脑&#xff0c;叫做服务器。 http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块…...

编程日记 2023/10/23 3:33:20

SD NAND对比TF卡优势（以CSNP4GCR01-AMW为例）

最近做的一个项目&#xff0c; 需要加大容量存储&#xff0c;这让我想到之前在做ARM的开发板使用的TF卡方案&#xff0c;但是TF卡需要携带卡槽的&#xff0c;但是有限的PCB板布局已经放不下卡槽的位置。 这个时候就需要那种能够不用卡槽&#xff0c;直接贴在板子上面&#xff0…...

编程日记 2023/10/23 3:32:19

在Espressif-IDE中使用Wokwi仿真ESP32

陈拓 2023/10/17-2023/10/19 1. 概述 在Espressif-IDE v2.9.0版本之后可直接在IDE中使用Wokwi模拟器。 1.1 什么是 Wokwi 模拟器&#xff1f; Wokwi 是一款在线电子模拟器&#xff0c;支持模拟各种开发板、元器件和传感器&#xff0c;例如乐鑫产品 ESP32。 Wokwi 提供基于浏…...

编程日记 2023/10/23 3:30:16

vue3里面vant组件的标签页使用？

一、绑一个v-model事件 二、让activeName的初始为0也就是默认是显示第一个标签页的下标 三、给标签页下面的东西进行一个判断 想让哪个优先显示就把哪个判断作为初始值存入...

编程日记 2023/10/23 3:29:16

【CSS】使用 CSS 实现一个宽高自适应的正方形

1. 利用 padding 或 vw <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><metaname"viewport"content"widthdevice-width, initial-scale1.0"><title>Document</title><st…...

编程日记 2023/10/23 3:28:15

Java Stream流详解

Stream API主要提供了两种类型的操作&#xff1a;中间操作 和 终止操作。 中间操作 中间操作是返回一个新的流&#xff0c;并在返回的流中包含所有之前的操作结果。它们总是延迟计算&#xff0c;这意味着它们只会在终止操作时执行&#xff0c;这样可以最大限度地优化资源使用。…...

编程日记 2023/10/23 3:26:12

localforage-本地存储的优化方案

前言 前端本地化存储算是一个老生常谈的话题了&#xff0c;我们对于 cookies、Web Storage&#xff08;sessionStorage、localStorage&#xff09;的使用已经非常熟悉&#xff0c;在面试与实际操作之中也会经常遇到相关的问题&#xff0c;但这些本地化存储的方式还存在一些缺陷…...

编程日记 2023/10/23 3:25:11

自学SLAM（4）《第二讲：三维物体刚体运动》作业

前言 小编研究生的研究方向是视觉SLAM&#xff0c;目前在自学&#xff0c;本篇文章为初学高翔老师课的第二次作业。 文章目录 前言1.熟悉 Eigen 矩阵运算2.几何运算练习3.旋转的表达4.罗德里格斯公式的证明5.四元数运算性质的验证6.熟悉 C11 1.熟悉 Eigen 矩阵运算 设线性⽅程 …...

编程日记 2023/10/23 3:24:11

C++:容量适配器(栈、队列、优先级队列)

目录 1.容器适配器 4.1 什么是适配器 4.2 STL标准库中的容器适配器 2.stack的使用 2.1 STL库中对stack的实现 3.queue的使用 3.1 STL库中对queue的实现 4.priority_queue使用 4.1模拟实现 priority_queue 5.deque 的简介 1.容器适配器 4.1 什么是适配器 适配器是一种…...

编程日记 2023/10/23 3:23:09

Java-IO流

文章目录 Java-IO流文件字节流文件字符流File类缓冲流转换流打印流数据流对象流 Java-IO流 JDK提供了一套用于IO操作的框架&#xff0c;为了方便我们开发者使用&#xff0c;就定义了一个像水流一样&#xff0c;根据流的传输方向和读取单位&#xff0c;分为字节流InputStream和…...

编程日记 2023/10/23 3:22:08

04、Python 爬取免费小说思路

目录 Python 爬取免费小说思路代码解析爬取东西基本的四行代码：user-agent安装模块从 bs4 导入 BeautifulSoup ，查询某个标签开头的数据筛选遍历获取小说的章节名称每章小说的链接获取请求网址的响应获取小说的内容筛选内容整理内容爬取下载到指定文件夹完整代码：Python 爬取…...

编程日记 2023/10/23 3:21:08

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2026/1/27 17:00:20

13.10 LangGraph多轮对话系统实战：Ollama私有部署+情感识别优化全解析

LangGraph多轮对话系统实战：Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词：多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...

编程新知 2025/11/26 18:37:42

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

编程新知 2025/10/2 20:58:12

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...

编程新知 2025/10/18 7:56:08

Android多媒体——音/视频数据播放（十八）

在媒体数据完成解码并准备好之后，播放流程便进入了最终的呈现阶段。为了确保音视频内容能够顺利输出，系统需要首先对相应的播放设备进行初始化。只有在设备初始化成功后，才能真正开始音视频的同步渲染与播放。这一过程不仅影响播放的启动速度，也直接关系到播放的稳定性和用…...

编程新知 2025/10/30 21:36:57

湖北理元理律师事务所：债务清偿方案中的法律技术革新

文/金融法律研究组 当前债务服务市场存在结构性矛盾&#xff1a;债权人追求快速回款&#xff0c;债务人需要喘息空间。湖北理元理律师事务所通过创新法律技术&#xff0c;在《企业破产法》《民法典》框架下构建梯度清偿模型&#xff0c;实现多方利益平衡。 一、个人债务优化的…...

编程新知 2026/1/23 1:40:33