JavaScript-03DOM_js-03-CSDN博客

本文链接：https://blog.csdn.net/xiaoai_tx/article/details/107028586

DOM简介
在这里插入图片描述
DOM查询

DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        事件：用户和浏览器之间的互动
    -->
</head>
<body>
    <button id="btn">按钮</button>
    <script>

        // 获取id为btn的按钮
        var btn = document.getElementById("btn");

        /*
            - 为按钮的对应事件绑定处理事件函数的形式来响应事件，
              当事件触发时，函数被调用。
        */

        // 为按钮绑定一个单击响应函数
        btn.onclick = function(){
            alert("点我干嘛？")
        };
    </script>
</body>
</html>

文档的加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="">

        window.onload = function(){
            
            // 获取id为btn的按钮
            var btn = document.getElementById("btn");

            // 为按钮绑定一个单击响应函数
            btn.onclick = function(){
                alert("点我干嘛？")
            };
        };
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>

DOM查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../code/02CSS/reset.css">
    <script>
            /*
                定义为指定元素绑定单击响应函数
                参数：
                    idstr     要绑定单击响应函数的对象的id属性值
                    fun       时间的回调函数，当单击元素时，函数被触发
            */
           function myclick(idstr,fun){
            var btn01 = document.getElementById(idstr);
            btn01.onclick = fun;
            };

        window.onload = function(){

            // 为id 为btn01绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                // 查找#bj节点
                var bj = document.getElementById("bj")
                // innerHTML 查找id内的元素
                alert(bj.innerHTML);
            };

            // 为id 为btn02绑定一个单击响应函数
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){

                // getElementsByTagName 根据标签名查找会返回一个数组，
                var lis = document.getElementsByTagName("li");
               // alert(lis.length);

               for(var i = 0; i <lis.length; i++){
                   alert(lis[i].innerHTML);
               };
            };

            var btn03 = document.getElementById("btn03");
            btn03.onclick = function(){
                var value_bite = document.getElementsByName("性别");
                // alert(value_bite);
                for(var i= 0;i < value_bite.length; i++ ){
                    alert(value_bite[i].value);                };
            };

            var btn04 = document.getElementById("btn04");
            btn04.onclick = function(){
                var city_lis = city.getElementsByTagName("li");

                for(var i = 0; i < city_lis.length; i++){
                    alert(city_lis[i].innerHTML);
                };

            };

            var btn05 = document.getElementById("btn05");
            btn05.onclick = function(){
                // 返回#city 的所有子节点
                var city = document.getElementById("city");

                // childNodes属性会获取包括文本节点在内的所有子节点
                // DOM标签内部的空白也会变成文本节点
                var cns = city.childNodes;
                // alert(cns.length);

                var cns02 = city.children;
                for(var i = 0; i <cns02.length;i++){
                    alert(cns02[i].innerHTML);
                };
            };

            var btn06 = document.getElementById("btn06");
            btn06.onclick = function(){
                var city = document.getElementById("city");
                // firstChild 查找第一个子节点，包括空白文本
                var fir = city.firstChild;
                // alert(fir);

                // firstElementChild 查找第一个子元素，但是不兼容IE8以下
                fir = city.firstElementChild;
                alert(fir.innerHTML);
            };

            myclick("btn07",function(){
                var bj = document.getElementById("bj");

                // parentNode 查找父节点
                var pn = bj.parentNode;
                // alert(pn.innerHTML);

                // innerText 会将HTML标签去除
                alert(pn.innerText);
            });

            myclick("btn08",function(){
                var usr = document.getElementById("username");
                alert(usr.value);
            });

            myclick("btn09", function(){
                var usr = document.getElementById("username");
                usr.value= "修改后的value值是这个";
            });
        };
    </script>
    <style>
        #city li{
            background-color: bisque;
            border: 1px solid black;
            display: inline;
            margin: 0 10px;
            padding: 5px;
        }

        #city{
            margin-left: -40px;
        }

        .test{
            border: 1px solid brown;
            padding-left: 20px;
            margin-bottom: 30px;
            width: 400px;
        }

        .index{
            border: 1px solid green;
            padding:20px;
            width: 400px;
        }
    </style>
</head>
<body>   
    <div class="inner"> 
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>重庆</li>
            <li>深圳</li>
            <li>海南</li>
        </ul>
    </div><br><br>

    <div class="test">
        <p>测试通过name属性来获取元素节点</p>
        <div class="inner">
            性别：
            <input type="radio" name= "性别" value="">
            男
            <input type="radio" name="性别" value="">
            女
            <br><br>

            姓名：
            <input type="text" name="name" id="username" value="321"><br><br>
        </div>
    </div>

    <div class="index">
        <div><button id="btn01">查找#bj节点</button></div><br>
        <div><button id="btn02">查找所有li节点</button></div><br>
        <div><button id="btn03">查找 name= "性别" 下的所有value节点</button></div><br>
        <div><button id="btn04">查找 city 下的所有li节点 </button></div><br>
        <div><button id="btn05">查找 city 下的所有子节点 </button></div><br>
        <div><button id="btn06">查找 city 下的第一个节点 </button></div><br>
        <div><button id="btn07">查找 id 的父节点 </button></div><br>
        <div><button id="btn08">查找 username 的value值 </button></div><br>
        <div><button id="btn09">修改 username 的value值 </button></div><br>
    </div>
</body>
</html>

图片切换练习

<!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: 0;
            padding: 0;
        }

        .outer{ 
            background-color: bisque;
           text-align: center;
           margin: 0 auto;
           margin-top: 100px;
        }

        #info{
            padding: 20px 0 15px 0;
        }
    </style>

    <script>
        window.onload = function(){

            // 获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            var img = document.getElementsByTagName("img")[0];

            var img_list = ["js基础/33图片练习/01.jpg",  "js基础/33图片练习/02.png","js基础/33图片练习/03.png","js基础/33图片练习/04.png","js基础/33图片练习/05.png","js基础/33图片练习/06.png"];

            var index = 0;

            var info = document.getElementById("info");
                info.innerHTML = "共有 "+ img_list.length + " 张图片，当前是第 "+(index+1)+" 张";

            prev.onclick = function(){

                index--;

                if(index < 0){
                    index = (img_list.length-1);
                };

                img.src = img_list[index];

                info.innerHTML = "共有 "+ img_list.length + " 张图片，当前是第 "+(index+1)+" 张";
                    
            };

            next.onclick = function(){

                index++;

                if(index > img_list.length-1){
                    index = 0;
                };
                
                img.src = img_list[index];

                info.innerHTML = "共有 "+ img_list.length + " 张图片，当前是第 "+(index+1)+" 张";
                
            };
        };
    </script>
</head>
<body>
    <div class="outer">

        <p id="info"></p>
        <img src="js基础/33图片练习/01.jpg"><br>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

全选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>全选练习</title>
    <script>
        window.onload = function(){
            var checkAllBtn = document.getElementById("checkAllBtn");
            checkAllBtn.onclick = function(){
                // 获取四个多选框
                var items = document.getElementsByName("items");
                // 遍历数组
                for(var i = 0;i<items.length;i++){

                    // 设置四个多选框成为选中状态
                    // 通过多选框的checked属性设置或获取多选框状态
                    items[i].checked = true;
                }
            };

            var checknoAllBtn = document.getElementById("checknoAllBtn");
            checknoAllBtn.onclick = function(){
                // 获取四个多选框
                var items = document.getElementsByName("items");
                // 遍历数组
                for(var i = 0;i<items.length;i++){
                    items[i].checked = false;
                };
            };

            var checkRevBtn = document.getElementById("checkRevBtn");
            checkRevBtn.onclick = function(){
                // 获取四个多选框
                var items = document.getElementsByName("items");
                // 遍历数组
                for(var i = 0;i<items.length;i++){
                    /* 
                    if(items[i].checked){
                        items[i].checked = false; 
                    }else{
                        items[i].checked = true; 
                    };
                    */
                    items[i].checked = !items[i].checked;
                };
            };

            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i = 0;i <items.length;i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    };
                };
            };  

            var checkAllBox = document.getElementById("checkAllBox");
            checkAllBox.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i = 0;i<items.length;i++){
                    // items[i].checked = checkAllBox.checked;
                    items[i].checked = this.checked;
                };
            };

            /*
                四个多选框都选中，则checkAllBox也应该被选中
            */
            var items = document.getElementsByName("items");
            for(var i = 0;i<items.length;i++){
                items[i].onclick = function(){
                    checkAllBox.checked = true;
                        for(var j=0;j<items.length;j++){
                            if(!items[j].checked){
                                checkAllBox.checked = false;
                                break;
                            };
                        };
                };
           };
        };
    </script>
</head>
<body>
    <form action="">你喜欢的运动是什么？
        <input type="checkbox" id="checkAllBox">全选/全不选
    <br><br>
    <input type="checkbox" name="items" value="足球">足球
    <input type="checkbox" name="items" value="篮球">篮球
    <input type="checkbox" name="items" value="羽毛球">羽毛球
    <input type="checkbox" name="items" value="橄榄球">橄榄球
    <br><br>
    <input type="button" id="checkAllBtn" value= "全选">
    <input type="button" id="checknoAllBtn" value= "全不选">
    <input type="button" id="checkRevBtn" value= "反选">
    <input type="button" id="sendBtn" value= "提交">

    </form>
</body>
</html>

DOM增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     #city li{
            background-color: bisque;
            border: 1px solid black;
            display: inline;
            margin: 0 10px;
            padding: 5px;
        }

        #city{
            margin-left: -40px;
        }
</style>
<script>
    window.onload = function(){

        myClick("btn01",function(){
        // document.createElement   创建元素节点
        var li = document.createElement("li");

        // document.createTextNode  创建文本节点
        var jx = document.createTextNode("江西");

        // 父节点.appendChild(子节点)   将子节点添加到父节点中
        li.appendChild(jx);

        var city = document.getElementById("city");
        city.appendChild(li);
        });

        myClick("btn02", function(){
            var li = document.createElement("li");
            var hn = document.createTextNode("湖南");
            li.appendChild(hn);

            // 注：要添加节点时，必须将旧节点表示出来
            var bj = document.getElementById("bj");
            var city = document.getElementById("city");

            // 父节点.insertBefore(新节点, 旧节点)
            city.insertBefore(li, bj);
        });

        myClick("btn03", function(){

            var li = document.createElement("li");
            var sc = document.createTextNode("四川");
            li.appendChild(sc);

            var cq = document.getElementById("cq");
            var city = document.getElementById("city");

            city.replaceChild(sc, cq);
        });

        myClick("btn04", function(){

            var hnn = document.getElementById("hnn");

            hnn.parentNode.removeChild(hnn);
        });

        myClick("btn05", function(){
            var city = document.getElementById("city");
            // alert(city.innerHtml);   读取元素节点
            alert(city.innerText);
        });

        myClick("btn06", function(){
            var hnn = document.getElementById("hnn");
            hnn.innerHTML = "江西";
        });

        myClick("btn07", function(){
            var city = document.getElementById("city");
            city.innerHTML += "<li>云南</li>";
        });

        myClick("btn08", function(){
            var city = document.getElementById("city");
            var li = document.createElement("li");
            li.innerHTML = "优秀";
            city.appendChild(li);
        });
    };

    function myClick(idstr, fun){
        var btn = document.getElementById(idstr);
        btn.onclick = fun;
    };
</script>
<body>
    <div class="inner"> 
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li id="cq">重庆</li>
            <li>深圳</li>
            <li id="hnn">海南</li>
        </ul>
    </div><br><br>

    <div class="index">
        <div><button id="btn01">创建江西节点并且添加到#city中</button></div><br>
        <div><button id="btn02">创建湖南节点并且添加到北京之前</button></div><br>
        <div><button id="btn03">创建四川节点并且替换重庆节点</button></div><br>
        <div><button id="btn04">删除海南节点 </button></div><br>
        <div><button id="btn05">读取city内的元素 </button></div><br>
        <div><button id="btn06"> 替换海南为江西</button></div><br>
        <div><button id="btn07"> 增加一个城市</button></div><br>
        <div><button id="btn08"> 最优秀的增加城市方案</button></div><br>
    </div>
</body>
</html>

在这里插入图片描述
添加空白练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
        table{
            width:30%;
            border: 1px solid black;
            margin: 10px auto;

            /* border-spacing: 5px;  设置边框之间的距离 */
            /* border-spacing: 0px; */

            /*  border-collapse: collapse;  设置边框合并，*/
            border-collapse: collapse;
        }

        /* 
            使用td 设置边框，可以显示横向和纵向边框
            使用tr 设置边框，只会显示横向边框
        */
        td{
            border: 1px solid black;
            /* 文字在表格中默认垂直居中，使用text/vertical-align: center可设置水平或纵向位置设置; */
            height: 30px;
            text-align: center;
        }

        th{
            border: 1px solid black;
            height: 15px;
            text-align: center;
        }

        /* 给tr/td 设置横向/纵向颜色设置时，可以集合伪元素，nth-child 实现选择行列设置*/
        tr:nth-child(2n){
            color: rgb(175, 112, 88);
        }

        h4{
           text-align: center;
           margin-top: 100px;
           font-size: 20px;
        }
</style>

<script>
    // a的删除函数
    function delA(){
                var tr = this.parentNode.parentNode;

                // var name = tr.getElementsByTagName("td")[0].innerHTML;
                var name = tr.children[0].innerHTML;

                // confirm能够生成确定和取消两个按钮，并且返回true
                var flag = confirm("确认删除 "+ name + "吗？")
                if(flag){
                    // 如果confirm点击确定，则执行删除操作
                    tr.parentNode.removeChild(tr);
                };

                return false;
            };

    window.onload = function(){
        // 查找所有a标签
        var allA = document.getElementsByTagName("a");
        for(var i = 0;i<allA.length;i++){

            // 遍历所有a 并为其指定单击响应函数
            allA[i].onclick = delA;
        };

        var subButton = document.getElementById("subButton");
        subButton.onclick = function(){
            // 获取用户添加信息
            var name = document.getElementById("empName").value;
            var email = document.getElementById("Email").value;
            var sal = document.getElementById("Salary").value;

            
        var tr = document.createElement("tr");
        tr.innerHTML = "<td>"+ name + "</td>"+
                        "<td>"+ email+ "</td>"+
                        "<td>"+ sal + "</td>"+
                        "<td><a href= '#'>delete</a></td>";

        var a = tr.getElementsByTagName("a")[0];
        
        a.onclick = delA;

        var eeTable = document.getElementById("eeTable");
        var tbody = eeTable.getElementsByTagName("tbody")[0];
        tbody.appendChild(tr);
        };
    };
</script>
<body>
    <table id="eeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>删除按钮</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>1.com </td> 
            <td>$500</td >
            <td><a href="#">delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>2.com</td>
            <td>$10</td>
            <td><a href="#">delete</a></td>
        </tr>
        <tr>
            <td>jack</td>
            <td>3.com</td>
            <td>$100000</td>
            <td><a href="#">delete</a></td>
        </tr>
    </table>

    <div class="formTable">
        <h4>请添加新员工:</h4>
        <table>
            <tr>
                <td class="word">Name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            <tr>
                <td class="word">Email:</td>
                <td class="inp">
                    <input type="text" name="Email" id="Email">
                </td>
            </tr>
            <tr>
                <td class="word">Salary:</td>
                <td class="inp">
                    <input type="text" name="Salary" id="Salary">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="subButton" value="abc">submit</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

在这里插入图片描述
DOM操作css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改样式</title>
    <style>
        #box1{
            width: 150px;
            height: 150px;
            background-color: bisque;
        }
    </style>

    <script>
        window.onload = function(){

            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
        /*       
            通过js修改元素的样式：
                语法：元素.style.样式名 = 样式值；
                注：当样式名含有‘-’时，需要将连接符之间的小写转换成为大写
        */
            box1.style.width = "200px";
            box1.style.borderBottomColor = "red";
            box1.style.borderRadius = "50%";
            };

            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){

                // 注：读取样式只能够读取内联样式，如下height没有改变，则不能读取出来
                // box1.currentStyle.width 显示当前生效的样式，但只在IE生效
                alert(box1.style.width);
                alert(box1.style.height);
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div><br>
    <button id="btn01">点击改变box1样式</button>
    <button id="btn02">读取box1样式</button>
</body>
</html>

在这里插入图片描述
读取元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取</title>
    <style>
        #box1{
            width: 150px;
            height: 150px;
            background-color: bisque;
        }
    </style>

    <script>
        window.onload = function(){

            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){

            /*
                getComputedStyle(元素,null)  显示元素样式，后面需要跟两个参数
                该方法会返回个对象，可以使用 --- 对象.样式名--- 来获取具体的样式
                   var obj = getComputedStyle(box1,null).height;
                   alert(obj);
            */

            // 注：获取样式内的样式必须加双引号
               var w = getStyle(box1,"width");
               alert(w);
                
            };
        };

        function getStyle(obj, name){
            if(window.getComputedStyle){
                // 正常浏览器，使用getComputedStyle(obj, null)方法
                return getComputedStyle(obj, null)[name];
            }else{
                // IE8浏览器，使用currentStyle方法
                return obj.currentStyle[name];
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div><br>
    <button id="btn01">点击显示box1当前生效样式</button>
</body>
</html>

在这里插入图片描述
其他样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 150px;
            height: 150px;
            background-color: bisque;
            padding: 10px;
            border: 1px solid burlywood;
            margin: 5px;
        }

        #box2{
            padding: 50px;
            width: 200px;
            height: 300px;
            background-color: cornflowerblue;
            overflow: scroll;
        }

        #box4{
            width: 100px;
            height: 400px;
            background-color: crimson;
        }
    </style>

    <script>

        window.onload = function(){
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){

                /*
                    clientHeight 返回元素的可见宽度/高度，包括元素内容以及内边距
                    offsetHeight 返回元素的全部宽度/高度，包括元素内容以及内边距，边框等

                    alert(box1.clientHeight);
                    alert(box1.clientWidth);
                    alert(box1.offsetHeight);
                */

                // offsetParent 获取当前元素的定位元素父元素
                var op = box1.offsetParent;
                alert(op.id);

                // offsetLeft 当前元素相对于其定位父元素的水平偏移量/垂直偏移量
                alert(box1.offsetLeft);

                // scrollHeight，scrollWidth 获取滚动区域的高度或宽度
                alert(box4.scrollHeight);

                // scrollTop 滚动条滚动的垂直或水平距离
                alert(box4.scrollTop);
            };
        };
        
    </script>
</head>
<body>

    <div id="box3" style="position: relative;">
        <div id="box2" style="position: relative;">
            <div id="box1"></div>

            <div id="box4"></div>
        </div>
    </div>
    <br>
    <button id="btn01">测试按钮</button>


</body>
</html>

在这里插入图片描述
scroll练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info{
            width: 320px;
            height: 500px;
            background-color:coral;
            overflow: auto;
        }
    </style>

    <script>
        window.onload = function(){
            // 当垂直滚动条到底后按钮可点

            var info = document.getElementById("info");

            // 获取input
            var inputs = document.getElementsByTagName("input");
            // 为info绑定一个滚动事件
            info.onscroll = function(){
                // 检查滚动条是否到底
                if(info.scrollHeight- info.scrollTop == info.clientHeight){

                    /*
                        disable 属性可以设置元素是否禁用，true则禁用，false则可用
                    */
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                };
            };
        };
    </script>
</head>
<body>
    <h3>欢迎您注册！</h3>
    <p id="info">
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
        风在淅淅沥沥的雨中，缓缓走过那路口；
    </p>
    <input type="checkbox" disabled= "disabled">我已仔细阅读协议，并遵守该协议!
    <input type="submit" value="注册" disabled= "disabled">
</body>
</html>

在这里插入图片描述
事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        #areaDiv{
            width: 600px;
            height: 300px;
            background-color: burlywood;
            border: 1px solid black;
        }

        #showMsg{
            width: 600px;
            height: 100px;
            background-color: cadetblue;
            border: 1px solid black;
        }
    </style>

    <script>
        window.onload = function(){
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            // onmousemove: 设置鼠标在元素中移动触发效果
            areaDiv.onmousemove = function(event){

                /*
                    - 在IE8中，响应函数被触发时，不会传递事件函数，
                    - 在IE8，是将事件对象作为window对象的属性保存
                */
                // alert("this")

                /* 方法一 解决兼容性
                    if(!event){
                        enent = window.enent;  // 如果事件不成立，则将event转换成window.event
                    };
                */ 

                event = event || window.event;  // 事件成立则返回event，不成立则返回window.event
                // clientX 获取鼠标指针的水平坐标/垂直坐标
                var x = event.clientX;
                var y = event.clientY;

                // alert("( x, y ) = " + "( " + x + " , "+ y + " )");

                showMsg.innerHTML = " ( x, y ) = " + "( " + x + " , "+ y + ")";
            };
        };
    </script>
</head>
<body>
    <div id="areaDiv"></div><br><br>
    <div id="showMsg"></div>
</body>
</html>

在这里插入图片描述
鼠标跟随练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>鼠标跟随</title>
    <style>
        #box1{
            width: 50px;
            height: 50px;
            background-color: bisque;
            border-radius: 50%;
            border: 1px solid red;

            /* 注：必须设置定位，因为偏移量是父元素定位偏移*/
            position: absolute;  
        }
    </style>

    <script>
        window.onload = function(){
        
        // 设置绑定为document而不是box1是为了全局移动
        document.onmousemove = function(event){
            // 解决兼容问题
            event = event || window.event;

            var st = document.body.scrollTop || document.documentElement.scrollTop;
            var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
            /* 
               获取鼠标坐标
               - clientX/Y 是相对于可见窗口的偏移量，即页面的左上角
               - 而div的偏移是相对于浏览器的最开始的左上角

               pageX/Y  可获取相对于当前页面的坐标，但不支持ie8

               var left = event.pageX;
                var top = event.pageY;
             */
            var left = event.clientX;
            var top = event.clientY;
            
            // 设置div 的偏移量,注：偏移量是数值，所以要带单位

            box1.style.left = left + sl + st+ "px";
            box1.style.top = top + sl + st + "px";
            };      
        };
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

在这里插入图片描述
事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 冒泡 </title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            
        }

        #sp{
            background-color: coral;
            border: 1px solid black;
        }
    </style>

    <script>
        window.onload = function(){
            /* 
                事件冒泡：事件的向上传导，后代元素触发后，祖先元素也触发
                取消冒泡: 事件.cancelBubble = true;
            */
            var box1 = document.getElementById("box1");
            var sp = document.getElementById("sp")

            box1.onclick = function(event){
                alert("box1点击响应");
                event.cancelBubble = true;
            };

            sp.onclick = function(){
                alert("span单击响应");
            };

            document.body.onclick = function(){
                alert("body单击响应");
            }
        };
    </script>
</head>
<body>
    <div id="box1">
        box1
        <span id="sp">span</span>
    </div>
</body>
</html>

在这里插入图片描述
事件委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>事件的委派</title>
    <script>
        window.onload = function(){
            var btn01 = document.getElementById("btn01");
            var ul = document.getElementById("ul");
            
            btn01.onclick = function(){
                var li = document.createElement("li");
                li.innerHTML = "<a href='#' class= 'link'>新增超链接</a>";
                ul.appendChild(li);
            };   

        // 为超链接绑定单击响应函数

        var allA = document.getElementsByTagName("a");
        /*
            事件的委派：将事件绑定给共同的祖先元素，后代元素触发时，会冒泡到祖先元素，从而执行效果
        */

        ul.onclick = function(event){
            event = event || window.event;

            // target 就是你点击的对象
            if(event.target.className == "link"){
                    alert("whis");
                };
            };
        };
    </script>
</head>
<body>
    <button id="btn01">添加新的超链接</button>

    <ul id="ul">
        <li><a href="#" class="link">超链接1</a></li>
        <li><a href="#" class="link">超链接2</a></li>
        <li><a href="#" class="link">超链接3</a></li>
    </ul>
</body>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var btn01 = document.getElementById("btn01");
            /*

            addEventListener 绑定多个响应函数
            - 一般传递三个参数，(事件的字符串，回调函数，false)
            - 注：事件的字符串不需要加on，不兼容IE8，响应是从上往下

            btn01.addEventListener("click",function(){
                alert(1);
            },false);
            btn01.addEventListener("click",function(){
                alert(2);
            },false);
            btn01.addEventListener("click",function(){
                alert(3);
            },false);
            */

            /*
                attachEvent 绑定多个响应函数
                - 一般传递两个参数，(事件的字符串，回调函数)
                - 注：事件的字符串一定要加on ，且只兼容IE8，响应是从下往上
                - 即后绑定先执行

                btn01.attachEvent("onclick",function(){
                    alert(1);
            });
            */
            bind(btn01, "click", function(){
                alert("测试");
            });
            /*
                参数：
                - obj  要绑定事件的对象
                - eventStr   事件的字符串，不加on
                - callback   回调函数
            */ 
            function bind(obj, eventStr, callback){
                // 除了IE8 不兼容
                if(obj.addEventListener){
                    obj.addEventListener(eventStr, callback, false);
                }else{
                    // 兼容IE8
                    obj.attachEvent("on"+ eventStr, function(){
                        callback.call(obj);
                    });
                };
            };
        };
    </script>
</head>
<body>
    <button id="btn01">事件</button>
</body>
</html>

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            事件传播：捕获阶段，目标阶段，冒泡阶段 
        */
    </script>
</head>
<body>    
</body>
</html>

拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: bisque;
            position:absolute;
        }
    </style>

    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            box1.onmousedown = function(event){
                // 设置捕获
                box1.setCapture && box1.setCapture(); 

                // alert("单击鼠标时，响应事件")
                event = event || window.event;
                /*
                    div的偏移量 鼠标.clientX - 元素.offsetLeft
                    div的偏移量 鼠标.clientY - 元素.offsetTop
                */

                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                document.onmousemove = function(event){
                    event = event || window.event;
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;

                    box1.style.left = left + "px";
                    box1.style.top = top + "px";

                   box1.releaseCpature && box1.releaseCpature();
                };     

                document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
                return false;       
            };     
        };

          
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

setCapture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");

            btn01.onclick = function(){
                alert("1");
            };
            btn02.onclick = function(){
                alert("2");
            };

            /*
                 btn01.setCapture; 在IE8 捕获会导致鼠标按下相关事件捕获
            */
          
        };
    </script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button id="btn02">按钮2</button>
</body>
</html>

鼠标滚轮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin: 50px auto;
        }
    </style>

    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // onmousewheel 鼠标滚轮滚动事件，滚轮滚动时触发，不支持火狐
            box1.onwheel = function(event){
                event = event || window.event;
                if(event.wheelDelta > 0){
                    // alert("shang");
                    box1.style.height = box1.clientHeight - 30 + "px";
                }else{
                    // alert("xia");
                    box1.style.height = box1.clientHeight + 30 + "px";
                };
                event.preventDefault();
                return false;
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 键盘事件一般绑定给可获得焦点对象或文档
        window.onload = function(){
            // onkeydown 键盘按下后事件触发
            // onkeyup 键盘松开后事件触发
            // eyCode 按键的编码

            /*
            document.onkeydown = function(event){
                console.log(event.keyCode);
            };
            */
            var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function(){
               //  console.log(event.keyCode);
            };

        };
    </script>
</head>
<body>
    <input type="text">
</body>
</html>

键盘事件练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: tomato;
            border-radius: 50%;
            position: absolute;
        }
    </style>

    <script>
        window.onload = function(){
            document.onkeydown = function(event){
                event = event || window.event;

                var speed = 10;   // 移动速度
                // 37-左  38-上 39-右 40-下
                // alert(event.keyCode);
                switch(event.keyCode){
                    case 37:
                    // alert("left");
                    box1.style.left = box1.offsetLeft - speed + "px";
                    break; 
                    case 38:
                    // alert("top");
                    box1.style.top = box1.offsetTop - speed + "px";
                    break; 
                    case 39:
                    // alert("right");
                    box1.style.left = box1.offsetLeft + speed + "px";
                    break; 
                    case 40:
                    // alert("bottom");
                    box1.style.top = box1.offsetTop + speed + "px";
                    break; 
                };
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

navigator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>navigator</title>
    <script>
        /*
            BOM: 浏览器模型
            - 可通过js操纵浏览器
            BOM对象：
            - Window ：浏览器窗口，
            - Navigator： 浏览器信息，可识别不同的浏览器
            - Location： 代表浏览器地址信息，可获取地址信息，或操作浏览器跳转页面
            - History： 浏览器历史记录
            - Screen： 屏幕信息
        */
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36
        alert(navigator.userAgent); 

        // 正则表达提取
        // IE中特有的ActiveXObject属性
        var ua = navigator.userAgent;
        if(/chrome/i.test(ua)){
            alert("chrome浏览器");
        }else if(/firefox/i.test(ua)){
            alert("火狐浏览器");
        };

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