前端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,关闭登录界面


相关文章
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
8天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
89 59
|
4天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
91 1
|
10天前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
|
17天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
16 4
|
20天前
|
存储
让星星⭐月亮告诉你,HashMap的put方法源码解析及其中两种会触发扩容的场景(足够详尽,有问题欢迎指正~)
`HashMap`的`put`方法通过调用`putVal`实现,主要涉及两个场景下的扩容操作:1. 初始化时,链表数组的初始容量设为16,阈值设为12;2. 当存储的元素个数超过阈值时,链表数组的容量和阈值均翻倍。`putVal`方法处理键值对的插入,包括链表和红黑树的转换,确保高效的数据存取。
47 5
|
20天前
|
XML Web App开发 JavaScript
XML DOM 解析器
XML DOM 解析器
|
16天前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
24 0
|
17天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
90 0
|
17天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念

推荐镜像

更多