DOM事件

最新推荐文章于 2022-08-24 20:27:32 发布

可乐爆米花

最新推荐文章于 2022-08-24 20:27:32 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/william_jzy/article/details/79773325

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了网页中用户与浏览器的交互方式，如事件监听与触发，并提供了多种DOM操作的实际案例，包括元素的选择、创建、删除及样式修改等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件

用户和浏览器之间的交互行为称为事件，例如鼠标的移动，点击按钮等

浏览器在加载页面时，是按照从上到下的顺序执行的，若将script标签写在上面，在代码执行时，页面还没有加载，这是可以使用onload事件，它会在整个页面加载完成之后才触发；或者也可以将script标签写在body标签里面的最下面。

下面是一些关于获取元素节点、子节点等方法de简单应用

切换图片的简单练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #image{
                width: 670px;
                margin: 50px auto;
                padding: 10px;
                text-align: center;
            }
            img{
                width: 650px;
            }

        </style>

        <script type="text/javascript">

            //点击按钮切换图片
            window.onload = function(){

                var btn_prev = document.getElementById("prev");
                var btn_next = document.getElementById("next");


                //切换图片就是修改img的src属性
                var img = document.getElementsByTagName("img")[0];
                var imgArr = ["img/william/01.jpg","img/william/02.jpg","img/william/03.jpg","img/william/04.jpg"];
                //创建当前图片的索引
                var index = 0;
                //信息
                var info = document.getElementById("info");
                info.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

                //上一张
                btn_prev.onclick = function(){
                    index--;
                    if(index < 0){
                        index = imgArr.length-1;
                    }
                    img.src = imgArr[index];
                    info.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                };
                //下一张
                btn_next.onclick = function(){
                    index++;
                    if(index > (imgArr.length-1)){
                        index = 0;
                    }
                    img.src = imgArr[index];
                    info.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                };
            };
        </script>

    </head>
    <body>

        <div id="image">
            <p id="info"></p>

            <img src="img/william/01.jpg" alt="01"/>

            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>

    </body>
</html>

这里写图片描述

DOM查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/css.css" />
        <script type="text/javascript">


            function myClick(idStr , fun){
                var btn01 = document.getElementById(idStr);
                btn01.onclick = fun;
            }


            window.onload = function(){

                //为btn01绑定一个单击响应按钮
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                    //1.查找#bj节点
                    var bj = document.getElementById("bj");

                    alert(bj.innerHTML);//北京
                };

                var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
                    //该方法会返回一个类数组，所有元素都将封装在对象中
                    var list = document.getElementsByTagName("li");
                    //使用循环遍历所有li
                    for(var i=0; i <list.length ; i++){
                        //2.查找所有li节点
                        alert(list[i].innerHTML);
                    }
                };


                var btn03 = document.getElementById("btn03");
                btn03.onclick = function(){
                    var gender  = document.getElementsByName("gender");
                    //使用getElementsByName也会返回一个类数组
                    //3.查找name=gender的所有节点
                    for(var i=0; i<gender.length ; i++){
                        alert(gender[i].value);
                        //可以直接使用元素.属性 直接获取值
                        //但是 class属性不能使用元素.class来获取，而需要使用元素.classname来获取
                    }
                };


                //4.查找#city下所有li节点
                var btn04 = document.getElementById("btn04");
                btn04.onclick = function(){
                    //var clist = city.getElementsByTagName("li");
                    var ci = document.getElementById("city");
                    var clist = ci.getElementsByTagName("li");

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


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

                    var cns = city.childNodes;
                    //标签间的空白字符也被当做文本节点
                    //可以使用children属性获取当前元素的子元素
                    //alert(cns.length);
                    var cns2 = city.children;
                    alert(cns2.length);

                };

                //6.返回#phone的第一个子节点
                var btn06 = document.getElementById("btn06");
                btn06.onclick = function(){
                    var phone = document.getElementById("phone");
                    var first = phone.firstChild;
                    alert(first.innerHTML);

                };

                //7.返回#bj的父节点
                /*var btn07 = document.getElementById("btn07");
                btn07.onclick = function(){
                    var bj = document.getElementById("bj");
                    var parent = bj.parentNode;
                    alert(parent.innerHTML);

                };*/
                myClick("btn07",function(){
                    var bj = document.getElementById("bj");
                    var parent = bj.parentNode;
//                  alert(parent.innerHTML);
                    //innerText 显示标签中的文本,与innerHTML类似，不同的是他会自动将HTML去除
                    alert(parent.innerText);
                });


                //8.返回#android的前一个兄弟节点（也可能获取到空白的文本）
                myClick("btn08",function(){
                    var android = document.getElementById("android");
                    var bro = android.previousSibling;
                    //也会获取空白文本
                    alert(bro.innerHTML);
                });

                //9.读取#username的value属性值
                myClick("btn09",function(){
                    var user = document.getElementById("username");
                    alert(user.value);
                });

                //10.设置#username的value属性值
                myClick("btn10",function(){
                    var usern = document.getElementById("username");
                    usern.value = "hello";
                    alert(usern.value);
                });

                //11.返回#bj的文本值
                myClick("btn11",function(){
                    var bj = document.getElementById("bj");
                    alert(bj.innerHTML);
                });


            };//window结束



        </script>
    </head>
    <body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>

                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>

                <br>
                <br>

                <p>
                    你喜欢哪款单机游戏?
                </p>

                <ul id="game">
                    <li id="rl">红警</li>
                    <li>实况</li>
                    <li>极品飞车</li>
                    <li>魔兽</li>
                </ul>

                <br />
                <br />

                <p>
                    你手机的操作系统是?
                </p>

                <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
            </div>

            <div class="inner">
                gender:
                <input class="hello" type="radio" name="gender" value="male"/>
                Male
                <input class="hello" type="radio" name="gender" value="female"/>
                Female
                <br>
                <br>
                name:
                <input type="text" name="name" id="username" value="abcde"/>
            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">查找#bj节点</button></div>
            <div><button id="btn02">查找所有li节点</button></div>
            <div><button id="btn03">查找name=gender的所有节点</button></div>
            <div><button id="btn04">查找#city下所有li节点</button></div>
            <div><button id="btn05">返回#city的所有子节点</button></div>
            <div><button id="btn06">返回#phone的第一个子节点</button></div>
            <div><button id="btn07">返回#bj的父节点</button></div>
            <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
            <div><button id="btn09">返回#username的value属性值</button></div>
            <div><button id="btn10">设置#username的value属性值</button></div>
            <div><button id="btn11">返回#bj的文本值</button></div>
        </div>
    </body>
</html>

这里写图片描述

DOM查询的其他方法

获取body
document.body
HTML根标签 document.documentElement
all 页面中的所有元素
-根据元素的class属性查询一组元素节点对象，getElementsByClassName() 但在IE8及以下浏览器不支持
document.querySelector()
需要一个选择器的字符串作为参数，可根据一个CSS选择器。
使用它，总会返回唯一一个元素；若有多个元素，那么只会返回第一个元素，这是可以使用`document.querySelectorAll()，他会将所有元素封装在数组中

DOM增删改

<script type="text/javascript">
window.onload = function() {
    //创建一个"广州"节点,添加到#city下
    myClick("btn01" , function(){
        //创建li元素节点
        var li = document.createElement("li");
        //创建“广州”子节点
        var gzText = document.createTextNode("广州");
        //将广州节点添加到li节点中
        //appendChild()
        li.appendChild(gzText);
        //获取city元素对象
        var city = document.getElementById("city");
        //将li节点添加到city节点中
        city.appendChild(li);

    });

    //将"广州"节点插入到#bj前面
    myClick("btn02" , function(){
        var li = document.createElement("li");
        var gzText = document.createTextNode("广州");
        li.appendChild(gzText);

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

        //插入到bj前面
        //city.insertBefore(li,bj);
        //可以使用bj.parentNode获取父元素
        bj.parentNode.insertBefore(li , bj);
    });

    //使用"广州"节点替换#bj节点
    myClick("btn03" , function(){
        var li = document.createElement("li");
        var gzText = document.createTextNode("广州");
        li.appendChild(gzText);

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

        //广州替换bj
        city.replaceChild(li,bj);

    });

    //删除#bj节点
    myClick("btn04" , function(){
        var city = document.getElementById("city");
        var bj = document.getElementById("bj");

        //删除
        city.removeChild(bj);
    });

    //读取#city内的HTML代码
    myClick("btn05" , function(){
        var city= document.getElementById("city");
        alert(city.innerHTML);
    });

    //设置#bj内的HTML代码
    myClick("btn06" , function(){
        var bj= document.getElementById("bj");
        bj.innerHTML = "南京";
    });

    //创建一个"广州"节点,添加到#city下
    myClick("btn07" , function(){
        var city= document.getElementById("city");
        //使用innerHTML也可以完成增删改的操作
        //city.innerHTML += "<li>广州</li>";

        var li = document.createElement("li");
        li.innerHTML ="广州";
        city.appendChild(li);
    });

    //创建myClick函数
    function myClick( idstr , fun ){
        var btn = document.getElementById(idstr);
        btn.onclick = fun;
        }
}；
</script>

</head>
    <body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>

                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>

            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
            <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
            <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
            <div><button id="btn04">删除#bj节点</button></div>
            <div><button id="btn05">读取#city内的HTML代码</button></div>
            <div><button id="btn06">设置#bj内的HTML代码</button></div>
            <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
        </div>
    </body>

这里写图片描述

onclick事件

鼠标点击时触发
全选练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">

        window.onload = function(){


            var items = document.getElementsByName("items");
            var allbox = document.getElementById("checkedAllBox");

            //1.#checkedAllBtn
            //设置全选按钮的单级响应函数
            var btnall = document.getElementById("checkedAllBtn");
            btnall.onclick = function(){
                //alert("全选~");
                //全部选框
                //alert(items);
                //遍历所有复选框
                allbox.checked = true;
                for(var i=0 ; i<items.length ; i++){
                    items[i].checked = true;
                }
            };


            //2.#checkedNoBtn
            var no_btn = document.getElementById("checkedNoBtn");
            no_btn.onclick = function(){
                //全部选框
                allbox.checked = false;
                //遍历所有复选框
                for(var i=0 ; i<items.length ; i++){
                    items[i].checked = false;
                }
            };

            //3.#checkedRevBtn
            var rev_btn = document.getElementById("checkedRevBtn");
            rev_btn.onclick = function(){
                //全部选框
                //alert(items);
                allbox.checked = true;
                //遍历所有复选框
                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;
                    //只要有一个没有选中，全选/全不选 就为false
                    if(items[i].checked == false){ //==不是=
                        allbox.checked = false;
                    }
                }
            };

            //4.#sendBtn
            var send_btn = document.getElementById("sendBtn");
            send_btn.onclick = function(){
                //提交后遍历所有选中的项
                for(var i=0 ; i<items.length ; i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            };

            //5.#checkedAllBox
            //在事件的响应函数中，响应函数是给谁绑定的 this就是谁
            allbox.onclick = function(){
                //alert(allbox.checked);
                //当他选中全选时，其他也选中
                for(var i=0 ; i<items.length ; i++){
                    //items[i].checked = allbox.checked;
                    items[i].checked = this.checked;
                }
            };
            //6.items
            for(var i=0 ; i<items.length ; i++){
                //给每一个复选框绑定单击响应函数，每选中一次复选框进行一次判断
                items[i].onclick = function(){
                    //将checkedAllBox设置为选中状态
                    allbox.checked = true;
                    //判断四个多选框是否全选,只要有一个没选中则就不是全选
                    for(var j=0 ; j<items.length ; j++){
                        if(!items[j].checked){
                            //一旦进入判断，则证明不是全选状态
                            //将checkedAllBox设置为没选中状态
                            checkedAllBox.checked = false;
                            //一旦进入判断，则已经得出结果，不用再继续执行循环
                            break;
                        }
                    }
                };
            }
        }

    </script>
</head>
<body>

    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 

        <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 />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>
</body>
</html>

这里写图片描述

综合练习
从一个表格中删除一个员工的所有信息；添加新的员工到表格中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加删除记录练习</title>
    <link rel="stylesheet" type="text/css" href="css/css001.css" />
    <script type="text/javascript">
        function delA(){
            //获取当前tr
            var tr = this.parentNode.parentNode;
            //获取当前员工名称
            //var name = tr.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;    
            //弹出提示框
            //alert("确定删除吗？");
            //confirm可以弹出一个带有确认和取消的提示框,且带有返回值
            var flag = confirm("确认删除"+name+"吗？");
            if(flag){
                //删除当前tr
                tr.parentNode.removeChild(tr);
            }
            //取消点击超链接默认跳转行为
            return false;
        };

        window.onload = function(){
            //获取链接
            var allA = document.getElementsByTagName("a");
            //为每个超链接都设置一个单击响应函数
            for(var i=0; i<allA.length ; i++){
                allA[i].onclick = delA;
            }

            //为按钮绑定单击响应函数
            var addBtn = document.getElementById("addEmpButton");

            addBtn.onclick = function(){
                //alert("hhhh");
                //获取empName email salary
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                //创建tr
                var tr = document.createElement("tr");
                tr.innerHTML =  "<td>"+name+"</td>"+
                                "<td>"+email+"</td>"+
                                "<td>"+salary+"</td>"+
                                "<td><a href='DeleteEmp?id=003'>Delete</a></td>";
                var a = tr.getElementsByTagName("a")[0];
                //为新添加的a绑定单击响应函数
                a.onclick = delA;

                //获取employeeTable
                var employTable = document.getElementById("employeeTable");
                //获取tbody
                var tbody = employTable.getElementsByTagName("tbody")[0];

                tbody.appendChild(tr);
            };
        };
    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">

        <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="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

这里写图片描述

onmousemove事件

鼠标在元素中移动时触发

事件对象：
当时间的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前时间的一切信息，例如，鼠标坐标，键盘那个按键被按下等……

box.onmousemove = function(event){
    event = event || window.event;//重要！
};

注意：要注意onmousemove的兼容问题
//获取鼠标的坐标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #areaDiv{
                width: 100%;
                height: 200px;
                border: 2px black solid;
                margin-bottom: 10px;
            }
            #showDiv{
                width: 200px;
                height: 50px;
                border: 2px black solid;
            }
        </style>

        <script type="text/javascript">
            window.onload = function(){
                var areaDiv = document.getElementById("areaDiv");//鼠标移动区域
                var showDiv = document.getElementById("showDiv");//显示坐标区域
                //var body = document.getElementsByTagName("body")[0];
                areaDiv.onmousemove = function(event){
                    //
                    event = event || window.event;
                    var x = event.clientX;
                    var y = event.clientY;

                    showDiv.innerHTML = "x:"+x+",y:"+y;

                };

            };
        </script>

    </head>
    <body>
        <div id="areaDiv"></div>
        <div id="showDiv"></div>

    </body>
</html>

这里写图片描述

使用DOM操作CSS

通过JS修改元素样式

修改的是内联样式
语法：元素.style.样式名 = 样式值（字符串格式）;
如果样式名中含有“-”（他们在JS中不合法），要将他们命名为驼峰命名法。例如：backgroung-color ——backgroundColor
读取样式：
元素.style.样式名（读取的也是内联样式）

获取元素当前显示的样式

元素.currentStyle.样式名（只有IE可以使用）

获取元素的属性

getComputedStyle()
需要两个参数：1. 要获取样式的元素
2. 可传递一个伪元素，一般都传null
该方法会返回一个对象，对象封装了当前元素对应的样式
对象.样式名获取值，如果获取的样式没有设置，则会获取真实的值，而不是默认值，例如，没有设置width，它会获取一个长度，而不是auto。
它不支持IE8及以下浏览器。
currentStyle和getComputedStyle()获取的样式都是只读的，不能修改
兼容所有浏览器获取元素样式值

//obj:要获取样式的元素  name:要获取的样式名
function getStyle(obj , name){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];//正常浏览器
    }else{
        return obj.currentStyle[name];//IE8
    }
}

var box1 = docment.getElementById("box1");
//例：获取box1的高度
var height = getStyle(box1,"height");

其他一些

clientWidth clientHeight 都是只读，不可修改的
返回元素的可见宽度和高度（返回的是数字，可以直接计算）
它包括元素的内容区和内边距，不包括外边距
offsetWidth offsetHeight
获取元素的整个的宽度和高度，包括内容区、内边距和边框
offsetParent
可以用来获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素；如果所有的祖先元素都没有开启定位，则返回body
offsetLeft * offsetTop
当前元素相对于其定位父元素的水平偏移量、垂直偏移量
scrollWidth scrollHeight
可以获取元素整个滚动区域的宽度和高度
scrollLeft scrollTop
可以获取水平滚动条滚动的距离、垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了；当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底了