DOM用法

Posted 2021-05-14 讷言敏行

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM用法相关的知识，希望对你有一定的参考价值。

一、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)    

        }

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

        // onmouseout 鼠标从某元素移开触发事件
        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以上是关于DOM用法的主要内容，如果未能解决你的问题，请参考以下文章 
 c_cpp 加载源图像固定用法（代码片段，不全）
 JavaScript单行代码，也就是代码片段
 实用代码片段将json数据绑定到html元素 （转）
 SQL Select 语句的用法
 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
 JavaScript 将片段附加到DOM而不是每个节点。