首页 > 其他分享> 文章详细

DOM用法(二)

2021-05-14 20:04:51 阅读：112 来源： 互联网

标签：function box console log DOM 用法 location var

一、DOM 控制class

classList ：以数组形式,获取该节点元素所有的class样式

remove ：移除类

add 　　：添加类

contains：判断是否包含某个类选择器

toggle ：没有就添加.有则删无则加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制class选择器</title>
    <style>
        .c1
        {width:400px;height:400px;border-radius: 400px;}
        .bg_red
        {background: red;}
        .bg_green
        {background: green;}


    </style>

</head>
<body>
    <button>点击</button>
    <div id="box" class="c1 bg_red bg_green"></div>
    <script>
        var div = document.getElementById("box")
        console.log(div)
        // 以数组形式,获取该节点元素所有的class样式
        console.log(div.classList)
        // remove 移除bg_green类选择器
        div.classList.remove("bg_green")
        // add 添加bg_green类选择器
        div.classList.add("bg_green")
        // 判断是否包含某个类选择器
        console.log(div.classList.contains("bg_green"))
        

        btn = document.querySelector("button")
        btn.onclick = function(){
            // 有这样class选择器就删除,没有就添加.有则删无则加;
            div.classList.toggle("bg_green")
        }

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

View Code

二、事件

2.1 onmouseover/onmouseout移入移出事件

onmouseover：鼠标移到某元素之上触发事件
onmouseout ：鼠标从某元素移开触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onmouseover/onmouseout移入移出事件</title>
    <style>
        *
        {margin:0px;padding:0px;}
        #box
        {width:100px;height:100px;background: red;position:absolute;left:0px;}

    </style>
</head>
<body>
    <!-- https://www.w3school.com.cn/jsref/dom_obj_event.asp 事件手册-->
    <!-- 事件静态绑定 -->
    <button onclick="func()">点击</button>
    <div id="box" ></div>

    <script>
        var box = document.querySelector("#box")
        function func(){
            var left = parseInt(window.getComputedStyle(box).left)
            console.log(left , typeof(left))

            id = setInterval(function(){
                left += 1
                box.style.left = `${left}px`;
            },50)    

        }

        // 事件动态绑定
        // onm ouseover 鼠标移到某元素之上触发事件
        box.onmouseover = function(){
            clearInterval(id)
        }

        // onm ouseout 鼠标从某元素移开触发事件
        box.onmouseout = function(){
            func()
        }


    </script>

</body>
</html>

View Code

2.2 遮罩层/模态框效果

<!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
        {
            width:100%;height:100%;
            background-color: black;
            position:fixed;top:0px;
            /* 设置透明度 */
            opacity: 0.7;
            display: none;
        }
        #content
        {
            border:solid 1px red;
            width:300px;
            height:300px;
            background-color: cornflowerblue;
            margin:15% auto ;
        }

        #close
        {cursor: pointer;}

    </style>
</head>
<body>
    <button id="login">点我</button>
    <div id="box">
        <div id="content">
            <div id="close">x</div>
            <img src="./quanquan.gif" alt="" width=100 >
        </div>
    </div>

    <script>
        var btn = document.querySelector("#login")
        var box = document.querySelector("#box")
        var close = document.querySelector("#close")
        btn.onclick = function(){
            box.style.display = "block"
        }
        close.onclick = function(){
            box.style.display = "none"
        }

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

2.3 onfocus/onblur聚焦事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onfocus/onblur聚焦事件</title>
</head>
<body>
    <input type="text" value="请输入内容" class="ceshi" >
    <script>
        var input = document.querySelector(".ceshi")
        console.log(input)

        // onfocus元素获得焦点触发事件
        input.onfocus = function(){
            console.log(1)
            input.value = ""
        }

        // onblur元素失去焦点触发事件
        input.onblur = function(){
            if(!input.value){
                input.value = "请输入内容"
            }            
        }

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

2.4 onchange 事件

省市区三级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onchange 省市区三级联动</title>
</head>
<body>
    <!-- 第一个下拉框 -->
    <select name="" id="d1">
        <option value="" disabled selected>---请选择---</option>
    </select>

    <!-- 第二个下拉框 -->
    <select name="" id="d2">

    </select>

    <script>
        data = {
            "河北" :["石家庄","邢台","廊坊","保定","张家口"],
            "北京" :["大兴","朝阳","顺义","海淀"],
            "辽宁" :["沈阳","大连","葫芦洞","锦州"],
            "深圳" :["南山","福田","龙岗","光明"]
        }

        var d1 = document.querySelector("#d1")
        var d2 = document.querySelector("#d2")
        console.log(d1)
        // 循环插入option 到 select下拉框中
        for(var i in data){
            var  option = document.createElement("option")
            // 在option中插入城市名 (给用户看的)
            option.innerHTML = i
            // 在value中插入城市名(给后台看的)
            option.value = i
            // 插入节点
            d1.appendChild(option)
        }
        
        
       d1.onchange = function(){
            console.log(d1.value)
            var current_opt = d1.value // 北京
            // 获取对应的数组
            var citylist = data[current_opt]
            console.log(citylist)
            var string = "<option disabled selected >--请选择--</option>"
            // 将标签文本直接放进去
            d2.innerHTML = string;

            for(var i = 0 ; i < citylist.length;i++){
                console.log(i)
                // citylist[i]获取区域名字
                var current_city = citylist[i]
                var option = document.createElement("option")
                // 在option中插入城市名 (给用户看的)
                option.innerHTML = current_city
                // 在value中插入城市名(给后台看的)
                option.value=  current_city
                // 插入到select下拉框中
                d2.appendChild(option)
            }


        }

    </script>

</body>
</html>

2.5 onl oad事件与 BOM对象location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> onl oad事件 与 BOM对象location </title>
</head>
<body>
    <button onclick="func1()">查看location</button>
    <button onclick="func2()">跳转页面</button>
    <button onclick="func3()">刷新页面</button>
    <button onclick="func4()">过一秒刷新页面</button>
    <script>

        function func1(){
            console.log(location)
            /* 地址: 协议 http:// ip + 端口号 + 路径 + 参数 + 锚点 */
            console.log(location.protocol) // 协议
            console.log(location.hostname) // ip
            console.log(location.port)     // 端口
            console.log(location.pathname) // 文件路径
            console.log(location.hash)     // 获取锚点
            console.log(location.search)   // 获取地址参数
            console.log(location.href)     // 获取完整地址
        }


        function func2(){
            location.href = "http://www.baidu.com"
        }

        function func3(){
            location.reload();
        }

        function func4(){
            setTimeout(func3,1000)
        }

        // 每过一秒刷新一下页面
        // 触发时机: 等待页面所有内容[文字,图片,连接]加载完毕之后,再去执行对应代码
        window.onload = function(){
            console.log(1111)
            func4()
        }



    </script>

</body>
</html>

标签：function,box,console,log,DOM,用法,location,var
来源： https://www.cnblogs.com/yj0405/p/14769698.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9