-
H5前端开发——DOM
大数据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(){ check(); //选完全部爱好，全选框被激活 allcheck.checked=arr.every(function (item) { return item.checked==true; }); }} //激活提交按钮功能封装成函数 function check() { var d=arr.some(function (item){ return item.checked == true; }); btn.disabled=!d; } </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
代码解析：
这是一个简单的HTML页面，主要实现了选择爱好后提交按钮才能被激活的功能。首先，在HTML中定义了几个输入框，其中三个是复选框，用来表示用户的不同爱好，另外一个是全选框，用来实现一键选择全部爱好的功能。最后有一个禁用的提交按钮，用来表示在没有选择任何爱好时是无法提交的。
在JavaScript代码中，首先通过querySelectorAll方法和属性选择器来获取所有的名称为“fun”的输入框，并且将它们转换成数组形式，方便后续的操作。此外还通过getElementById方法获取全选框和querySelector方法获取提交按钮。
然后，定义了点击全选框的事件，当全选框被点击时，将所有的爱好复选框的选择状态都设置成与全选框相同的状态，并且调用了check函数来判断是否需要激活提交按钮。
接下来，为每个爱好复选框都定义了一个点击事件，当任意一个爱好被选中时，调用check函数来判断是否需要激活提交按钮，并且判断是否需要将全选框的选择状态修改为全部爱好都被选中。
最后，定义了check函数，主要用来判断是否存在至少一个已被选中的爱好，如果存在则激活提交按钮，否则禁用提交按钮。最后通过some方法来判断是否有输入框被选中，如果存在被选中的输入框，则返回true，此时提交按钮会被激活。
②二级菜单折叠。通过给定的CSS样式实现以下功能：
单击考勤管理、信息中心和协同办公的任一项，如果当前二级菜单是折叠状态，则展开，同时其余项折叠；如果当前二级菜单状态是展开，则折叠。
form.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单折叠</title> <style> li { /*取消li小圆点*/ list-style: none; line-height: 2; } li li { line-height: 1.6; } li span { /*给 span 标签设置背景图片（开头的小加号小减号，no-repeat不循环，初始位置 0 0）*/ background: url(+.png) no-repeat left center; padding-left: 30px; } /*起始样式*/ li ul { height: 0; /*溢出隐藏*/ overflow: hidden; /*添加过渡效果*/ transition: all 0.5s; } /*展开样式*/ .open { background-image: url(-.png); } .open+ul { height: 80px; } </style> </head> <body> <ul class="tree"> <li><span>考勤管理</span> <ul> <li>日常考勤</li> <li>请假申请</li> <li>加班出差</li> </ul> </li> <li><span>信息中心</span> <ul> <li>日常考勤</li> <li>请假申请</li> <li>加班出差</li> </ul> </li> <li><span>协同办公</span> <ul> <li>日常考勤</li> <li>请假申请</li> <li>加班出差</li> </ul> </li> </ul> <script> const tree = document.querySelector('.tree'); // 获取树形菜单元素 const spans = tree.getElementsByTagName('span'); // 获取所有的 span 标签 for (let i = 0; i < spans.length; i++) { spans[i].addEventListener('click', function () { // 先将所有的 ul 都折叠起来 const uls = tree.getElementsByTagName('ul'); for (let j = 0; j < uls.length; j++) { uls[j].style.height = '0'; } // 将当前节点的子级 ul 展开或者折叠 const ul = this.nextElementSibling; if (ul.style.height === '0px') { ul.style.height = ul.scrollHeight + 'px'; // 展开 ul this.classList.add('open'); // 显示减号图标 } else { ul.style.height = '0px'; // 折叠 ul this.classList.remove('open'); // 显示加号图标 } }); } </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
③填写并验证注册信息，具体要求如下：
用户名称：长度4~12，数字英文大小写字母；
密码：长度8~16，大小写字母、数字或下划线；
确认密码：两次密码输入一致，不一致则提示错误；
手机号码：13、14、15、17、18开头的11位手机号；
电子邮箱：用户名@域名（域名后缀至少2个字符）；
所有输入不允许为空。form.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证</title> <link rel="stylesheet" href="form.css"> </head> <body> <div class="box"> <div class="box-head">填写注册信息</div> <div class="box-body"> <form onsubmit="return validateForm(this)"> <table> <tr> <th>用户名称：</th> <td><input type="text" name="username" placeholder="长度4~12，数字英文大小写字母"></td> <td><div></div></td> </tr> <tr> <th>密 码：</th> <td><input type="password" name="pwd" placeholder="长度8~16，大小写字母、数字或下划线"></td> <td><div></div></td> </tr> <tr> <th>确认密码：</th> <td><input type="password" name="repwd" placeholder="请再次输入密码进行确认"></td> <td><div></div></td> </tr> <tr> <th>手机号码：</th> <td><input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号"></td> <td><div></div></td> </tr> <tr> <th>电子邮箱：</th> <td><input type="text" name="email" placeholder="用户名@域名（域名后缀至少2个字符）"></td> <td><div></div></td> </tr> <tr><td colspan="3"><input type="submit" value="注册"></td></tr> </table> </form> </div> </div> <script src="form.js"></script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
form.js
// 表单验证函数 function validateForm(form) { // 获取表单元素和错误提示元素 const usernameInput = form.username; const pwdInput = form.pwd; const repwdInput = form.repwd; const telInput = form.tel; const emailInput = form.email; const usernameError = usernameInput.parentNode.nextElementSibling.firstElementChild; const pwdError = pwdInput.parentNode.nextElementSibling.firstElementChild; const repwdError = repwdInput.parentNode.nextElementSibling.firstElementChild; const telError = telInput.parentNode.nextElementSibling.firstElementChild; const emailError = emailInput.parentNode.nextElementSibling.firstElementChild; // 用户名称验证 const usernameReg = /^[a-zA-Z0-9]{4,12}$/; if (!usernameReg.test(usernameInput.value)) { usernameError.textContent = '请输入4~12位，数字英文大小写字母的用户名。'; usernameInput.focus(); return false; } else { usernameError.textContent = ''; } // 密码验证 const pwdReg = /^[\w]{8,16}$/; if (!pwdReg.test(pwdInput.value)) { pwdError.textContent = '请输入8~16位，大小写字母、数字或下划线的密码。'; pwdInput.focus(); return false; } else { pwdError.textContent = ''; } // 确认密码验证 if (pwdInput.value !== repwdInput.value) { repwdError.textContent = '两次输入的密码不一致，请重新输入。'; repwdInput.focus(); return false; } else { repwdError.textContent = ''; } // 手机号码验证 const telReg = /^1[3|4|5|7|8]\d{9}$/; if (!telReg.test(telInput.value)) { telError.textContent = '请输入13、14、15、17、18开头的11位手机号码。'; telInput.focus(); return false; } else { telError.textContent = ''; } // 电子邮箱验证 const emailReg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/; if (!emailReg.test(emailInput.value)) { emailError.textContent = '请输入正确的电子邮箱地址。'; emailInput.focus(); return false; } else { emailError.textContent = ''; } // 验证通过，提交表单 return true; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
2.实验效果贴图
输入的信息都符合正则匹配要求，最后成功提交表单：
个人总结：1.在这个实验中，我学习到了一些常见的前端交互功能的实现方法。首先，通过使用 JavaScript 和 HTML 的结合，我成功地实现了全选功能和二级菜单折叠功能。
2.对于全选功能，我利用了事件监听和元素属性的改变来实现复选框的选中和取消选中操作。通过判断运动、唱歌和写代码复选框的状态，我可以同步改变全选复选框的状态，并根据复选框的选中状态来决定提交按钮的可用状态。这个功能可以在处理一组相关的选项时提高用户体验和操作效率。
3.对于二级菜单折叠功能，运用了 CSS 样式的控制和 JavaScript 的事件绑定。通过监听点击事件，我可以根据当前二级菜单的状态来切换它的展开或折叠，并且同时隐藏其他的二级菜单。这个功能可以用于构建清晰的页面结构和提供更好的导航体验。
4.此外，在注册信息的填写与验证过程中，了解到了正则表达式的应用。通过编写合适的正则表达式，可以对用户输入的内容进行格式验证，确保数据的合法性。同时，我还学习到了如何使用 DOM 操作来获取表单元素和错误提示元素，并在验证不通过时显示相应的错误信息。5.通过完成这个实验，对前端交互功能的实现有了更深入的理解，并且掌握了一些常见功能的实现方法。这些技能对于提升网页的用户体验和交互效果非常重要，我将继续努力学习，不断提升自己的前端开发能力。
-
相关阅读:
开发人员常犯的 5 大 JavaScript 错误及其解决方案
CVPR2022 | 弱监督多标签分类中的损失问题
【Shell编程】| if 判断
【我真服了，学JAVA太困难了怎么办】如何应对学习Java困难的情况
Spark -- Spark3.2.2集成Hudi 0.11.1并同步Hive 3.1.3
【Leetcode】python回溯算法结果出现[[], [], []]（列表深拷贝 浅拷贝问题）
lua 时间差功能概略
java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis
SolidWorks2020详细步骤安装教程
计算机组成原理百道必考大总结（上）
- 原文地址：https://blog.csdn.net/Myx74270512/article/details/133976720
