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

H5前端开发——DOM

news 2026/1/20 0:13:57

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

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/15 5:48:48

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/15 4:24:53

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2026/1/15 6:20:28

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2026/1/18 9:32:11

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

编程新知 2025/8/8 13:20:37