前端javascript的DOM对象操作技巧,全场景解析(二)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 前端javascript的DOM对象操作技巧,全场景解析(二)

前端javascript的DOM对象操作技巧,全场景解析(一):https://developer.aliyun.com/article/1497182

4.隐藏显示密码效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏显示密码效果</title>
</head>
<body>
    <input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >点我显示密码</button>
    
    <div>
        <img src="images/oneal1.jpg" />
    </div>
    
    
    <script>

        // 效果1: 显示隐藏密码
        var password = document.querySelector("input[name=pwd]")
        console.log(password);
       // 标签里面的属性叫什么可以写什么,就获取到什么
       console.log(password.type);
        console.log(password.name);
        console.log(password.value); 
        console.log(password.className)

获取到标签以后,可以获取到里面的所有属性

    function change(){
        var btn = document.querySelector("#btn")
        console.log(btn);
        if(password.type=="password"){
            password.type = "text";
            btn.innerHTML = "点我隐藏密码";
        }else{
            password.type= "password";
            btn.innerHTML = "点我显示密码";
        }
    }

    // 效果2:点击换图片
    var img = document.querySelector("img");
    console.log(img)
   // 给图片添加点击事件,这个img是上面获取的img对象
        img.onclick = function(){
        console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
        var arr = img.src.split("/")
        imgname = arr[arr.length - 1]
        console.log(arr , imgname);
        
        if(imgname == "oneal1.jpg"){
            img.src = "images/bakeli.jpg";
        }else{
            img.src = "images/oneal1.jpg";
        }

    }

</script>
</body>
</html>

5.全选 反选 全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选,反选,不选</title>
    <style>
        *
        {margin:0px;padding:0px;}
        ul
        {list-style: none;}
        #ul1 li
        {float:left;}
        #ul1 li button
        {width:80px;height:30px;}
        #ul1 li button:hover
        {background-color: tan;}
        #ul2
        {clear:both;}

    </style>
</head>
<body>

    <ul id="ul1">
        <li><button>全选</button></li>        
        <li><button>不选</button></li>
        <li><button>反选</button></li>
    </ul>
    <ul id="ul2">
        <li><input type="checkbox"  /> 看电影 </li>
        <li><input type="checkbox" /> 吃面 </li>
        <li><input type="checkbox" /> 烫头 </li>
        <li><input type="checkbox" /> 跑步 </li>
        <li><input type="checkbox" /> 篮球 </li>
    </ul>

    <script>

        // 获取btn节点对象
        var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
        var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
        var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
        // 全选
        btn1.onclick = function(){
            // 获取#ul2 li 里的input
            /*
                此法现在不推荐使用
                var data_lst = document.getElementById("ul2").getElementsByTagName("input");
                console.log(data_lst)
            */
            var data_lst = document.querySelectorAll("#ul2 li input");
            console.log(data_lst)   //这里获取的是数组

    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        //console.log(input.checked)
        // 设置节点input的checked属性为true;
        input.checked = true;                
    }
}

// 不选
btn2.onclick = function(){
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        //console.log(input.checked)
        // 设置节点input的checked属性为false;
        input.checked = false;                
    }
}

// 反选
btn3.onclick = function(){
    var data_lst = document.querySelectorAll("#ul2 li input");
    console.log(data_lst)
    // 获取数组当中每一个input节点元素对象
    for(var input of data_lst){
        根据原来的值判断,取反,实现反选
        if(input.checked === true){
            input.checked = false;
        }else{
            input.checked = true;
        }
    }
}

    </script>
    


</body>
</html>

6.js控制css属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js控制css的相关属性</title>
    <style>
        .box
        {border:solid 1px red;}
        .box_new
        {position: absolute; left:200px;}

    </style>
</head>
<body>
    <button id="box1">点击我换颜色</button>
    <button id="box2">点击我隐藏</button>
    <button id="box3">点击我显示</button>
    <button id="box4">点击边框换圆角</button>
    <button id="box5">点击加样式</button>

    <div class="box" style="width:300px;height:200px;background-color: yellow;font-size:40px;">你好评</div>
   
   <script>
        var box = document.querySelector(".box");
        console.log(box);
        获取所有样式,里面属性字段采用小驼峰命名方式
        console.log(box.style);

// js的dom对象获取相关的css属性

// 获取方法一,js里面的css属性遇到多单词使用小驼峰命名

console.log(box.style.width);

console.log(box.style.backgroundColor);

如果按css的命名方式取值,则会取不到

// 获取方法二,使用css方式获取属性值,按照css的命名方式

console.log(box.style[“width”]);

console.log(box.style[“background-color”]);

console.log(box.style[“font-size”]);

上面两种方式只能获取内联的行内样式,获取不到外部引入的,写在head标签里面style里面的样式信息

内联的样式可以获取到

style引入的获取不到

// 获取方法三 getComputedStyle 获取该节点对象的所有样式,这种方式不管样式是外面css文件引入还是style内部引入,内联写入的css样式都可以获取到
获取的时候,用该方法获取,修改的时候用上面两种方式修改    
   console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>");
       console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>");

获取所有样式

通过该方法获取的属性值为字符串类型

 // 事件绑定,前两种获取方式常在修改的时候使用,优先级最高
       var box1 = document.getElementById("box1");
       var box2 = document.getElementById("box2");
       var box3 = document.getElementById("box3");
       var box4 = document.getElementById("box4");
       var box5 = document.getElementById("box5");
       box1.onclick = function(){
            box.style.backgroundColor = "red";
       }

       box2.onclick = function(){
            box.style.display = "none";
       }

       box3.onclick = function(){
            box.style.display = "block";
       }


     //缓慢变圆角,方法一:
       box4.onclick = function(){
   
            //box.style.borderRadius = "100%";
            var point = 0;
            var t = setInterval( function(){
                box.style.borderRadius = `${point}%`;
                if(point < 100){
                    point++;
                }else{
                    clearInterval(t)
                    console.log("结束了... ")
                }

            } , 50)
        }

    //   方法二,先定义一个睡眠函数,借助async函数
        function sleep(time){
        return new Promise((resolve) => setTimeout(resolve, time));
        }

       box4.onclick = async function(){
            for (var point = 0; point< 100; point++){
                box.style.borderRadius = `${point}%`;  
                await sleep(20);
            } 
       }

如果要控制标签button能否被点击,可以控制button的disbaled属性

    /* 重点 添加样式,提前设置好样式,点击事件触发该样式,取消样式把相关样式设为空即可*/
    box5.onclick = function(){
        // box.className = "box box_new";
        加等赋值前面必须要有空格,不然多个名字重叠到一块,不生效
        box.className += " box_new";
    }
    </script>
</body>
</html>

7.js事件

JavaScript常见的事件大体分类及常用事件:

1)鼠标事件

事件 说明

onclick 鼠标单击事件

onmouseover 鼠标移入事件

onmouseout 鼠标移出事件

onmousedown 鼠标按下事件

onmouseup 鼠标松开事件

onmousemove 鼠标移动事件

2)键盘事件

onkeydown 键盘按下

onkeyup 键盘松开

3)表单事件

onfocus 获取焦点时触发

onblur 失去焦点时触发

onselect 选中“单行文本框”或“多行文本框”中的内容时

onselectstart 开始一个新的选择时

onchange 具有多个选项的表单元素选择某一项时触发

onsubmit :确认按钮被点击。

onreset: 重置按钮被点击

4)编辑事件

oncopy 复制(拷贝)时触发

onselect 页面内容被选取时触发

oncontextmenu 按下鼠标右键时触发

5)页面事件

onload 文档加载完成后触发

onbeforeunload 离开页面之前触发

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件</title>
    <style>
        *{margin:0px;padding:0px;}
        .box
        {width:100px;height:100px;background: green;position: absolute;left:0px;}
    </style>
</head>
<body>
  
  <!-- 1.事件的静态绑定 -->
    <button onclick="func1()">按钮1</button>
    <div class="box"></div>
    <script>
       先获取节点对象 
       var box = document.getElementsByClassName("box")[0];
        var t;
        console.log(box);
        function func1(){
            var left = parseInt(window.getComputedStyle(box).left)
            console.log(left ,typeof(left));
            // console.log(box.style.left);
            t = setInterval(function(){
                left += 10;
                box.style.left  = `${left}px`;
            } , 50)
        } 

        
        
      
  // 2.事件的动态绑定 
       使用语法:节点对象.事件类型 = 功能函数

        // onmouseover 鼠标指针悬停在指定元素上时触发
        box.onmouseover = function(){
            clearInterval(t);
        }
        // onmouseout  鼠标指针离开指定元素时触发
        box.onmouseout = function(){
            func1()
        }


    </script>
</body>
</html>

8.js模态框

弹出一个页面,只能点击弹出的页面,后面的页面点不动,也叫遮罩层

比如淘宝的注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        .box {
            position:fixed;
            width:100%;
            height:100%;
            top:0px;
            background-color: greenyellow;
            display: none;
        }

        .content
        {            
            border:solid 1px red;
            width:500px;
            height:500px;
            background-color:tan;
            margin:auto;
            margin-top:14%;        
        }

    </style>
</head>
<body>
    <button id="login">登录</button>
    <div class="box">
        <div class="content" >
            <span class="close">X</span>
            <br />
            <span>账号: <input type="text"  /></span>
            <br / >
            <span>密码: <input type="password"  /></span>
        </div>
    </div>

    <script>
        var btn = document.getElementById("login");
        var box = document.querySelector(".box");
        var close = document.querySelector(".close");
        btn.onclick = function(){
            console.log(11)
            box.style.display = "block";
        }
        close.onclick = function(){
            box.style.display = "none";
        }



   </script>
</body>
</html>

点击登录按钮,显示登录界面,// 点击x,关闭登录界面


相关文章
|
28天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
24天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
99 59
|
11天前
|
机器学习/深度学习 编解码 前端开发
探索无界:前端开发中的响应式设计深度解析####
【10月更文挑战第29天】 在当今数字化时代,用户体验的优化已成为网站与应用成功的关键。本文旨在深入探讨响应式设计的核心理念、技术实现及最佳实践,揭示其如何颠覆传统布局限制,实现跨设备无缝对接,从而提升用户满意度和访问量。通过剖析响应式设计的精髓,我们将一同见证其在现代Web开发中的重要地位与未来趋势。 ####
39 7
|
13天前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
39 4
|
20天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
100 1
|
25天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
22天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
58 1
|
22天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
28 1
|
27天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
26天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。

推荐镜像

更多