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(

你可能感兴趣的:(大数据,系统运维,H5前端开发,大数据,html5,javascript,css,html,前端框架)