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

H5前端开发——DOM

news 2026/4/18 0:52:59

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

工业视觉检测：OpenCV FPS 正确计算的方式

工业视觉检测&#xff1a;OpenCV FPS 计算正确姿势 别再被 cap.get(cv2.CAP_PROP_FPS) 骗了&#xff01;“为什么我用 OpenCV 读相机&#xff0c;get(CAP_PROP_FPS) 返回 0&#xff1f;” “视频文件能拿到帧率&#xff0c;但工业相机就是不行&#xff01;” “我的算法明明很快…...

编程新知 2026/4/18 0:36:05

动态数据源类型转换终极指南：轻松实现多数据源无缝切换

动态数据源类型转换终极指南&#xff1a;轻松实现多数据源无缝切换 【免费下载链接】dynamic-datasource dynamic datasource for springboot 多数据源 动态数据源 主从分离 读写分离 分布式事务 项目地址: https://gitcode.com/gh_mirrors/dy/dynamic-datasource dyna…...

编程新知 2026/4/17 23:48:36

Python 使用 MySQL 数据库进行事务处理完整示例

事务&#xff08;Transaction&#xff09;是数据库操作的最小逻辑单元&#xff0c;遵循 ACID 原则&#xff1a;原子性&#xff08;Atomicity&#xff09;&#xff1a;要么全部执行成功&#xff0c;要么全部失败回滚一致性&#xff08;Consistency&#xff09;&#xff1a;执行前…...

编程新知 2026/4/17 22:59:25

Python实战：从零实现Transformer中的多头注意力机制

1. 理解多头注意力机制的核心思想 多头注意力机制是Transformer架构中最关键的组成部分之一&#xff0c;它让模型能够同时关注输入序列的不同位置&#xff0c;并学习到丰富的上下文信息。想象一下你在阅读一篇文章时&#xff0c;大脑会同时关注当前句子、前文提到的关键概念&am…...

编程新知 2026/4/17 22:34:52

【SITS2026官方性能白皮书精要】：AI模型推理延迟降低47%的7个硬核优化路径

SITS2026分享&#xff1a;AI性能优化建议 第一章&#xff1a;SITS2026白皮书核心结论与基准测试全景 2026奇点智能技术大会(https://ml-summit.org) 白皮书核心主张 SITS2026白皮书首次确立“语义-时序-空间”三重对齐&#xff08;STS Alignment&#xff09;为新一代智能系统…...

编程新知 2026/4/17 21:40:05

esp32操作系统研究

ESP32系列芯片作为乐鑫科技推出的高性能、低功耗物联网系统级芯片，其操作系统架构与实现机制是理解其技术优势和开发潜力的关键。本文将深入剖析ESP32的操作系统生态，从底层FreeRTOS内核到上层ESP-IDF开发框架，再到各类高级开发环境（如Arduino、MicroPython等）的层次结构，…...

编程新知 2026/4/17 21:03:14

用Python和MATLAB搞定CCA：从数据预处理到结果可视化的完整实战指南

Python与MATLAB双平台实战&#xff1a;典型相关分析(CCA)全流程解析 在金融风控、基因表达分析和工业过程监控等领域&#xff0c;我们常常需要研究两组高维变量之间的关联关系。典型相关分析(CCA)作为多元统计的经典方法&#xff0c;能够揭示变量组间的深层关联模式。本文将带您…...

编程新知 2026/4/17 20:41:02

别再搞混了！手把手教你配置SAP公司代码的会计科目表（OB62详解与避坑指南）

SAP财务实战&#xff1a;深度解析OB62配置中的会计科目表分配逻辑与避坑策略 每次打开SAP的财务配置界面&#xff0c;那些看似简单的选项背后往往隐藏着复杂的业务逻辑。特别是在处理跨国公司财务系统时&#xff0c;会计科目表的配置就像是在搭建一座连接不同会计准则的桥梁—…...

编程新知 2026/4/17 18:57:39

联想天逸100-15ibd旧本升级：光驱位装固态，我踩过的坑你别再踩了（附BIOS设置图）

联想天逸100-15ibd光驱位升级SSD全避坑指南 四年前入手的联想天逸100-15ibd笔记本&#xff0c;最近开机时间已经慢到让人焦虑。看着市面上那些秒开的电脑&#xff0c;决定给自己的老伙计来个"心脏移植"——加装固态硬盘。本以为是个简单的DIY小工程&#xff0c;没想到…...

编程新知 2026/4/17 18:43:05

**发散创新：基于Go语言的故障演练自动化框架设计与实战**在现代分布式系统中，**高可用性**

a发散创新&#xff1a;基于Go语言的故障演练自动化框架设计与实战 在现代分布式系统中&#xff0c;高可用性和容错能力已成为衡量服务稳定性的核心指标。传统的测试手段往往无法模拟真实环境下的异常场景&#xff0c;导致线上故障频发。为此&#xff0c;我们引入了一套轻量级、…...

编程新知 2026/4/17 17:59:38