dom元素事件的理解和应用

妖狐艹你老母 2022-04-10 04:24 257阅读 0赞

> dom  是一组用来描述脚本和结构之间如何交互的web标准；它是中立于平台和语言的接口。  
> html dom定义了所有html元素的对象和属性，以及访问它们的方法。

**document对象指的是所有的html对象**

**1.dom元素的获取**

*  **getElementsByClassName    获取的是集合类型，可以借助数组类型来理解** （是用的比较多的类型）
 *  **getElementById       获取的是唯一元素，可以借助id 特性来理解**（适合单一元素类型的获取）
 *  **getElementsByName    获取的是集合类型，可以借助数组和name来理解**
 *  **getElementsByTagName  获取集合类型   借助标签类型来理解**
 *  **document.body.getElementsByTagName**（作为了解）
 *    
    ***js里面不能进行隐式迭代（不能操作一堆）所以进行dom元素的获取时，一般先进性遍历！！！***

***代码分别如下***

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>dom操作</title>
    </head>
    <body>
        <button class="test">12345</button>
        <button class="test">99999</button>
        <button id="test">id</button>
        <button name="test">icy</button>
        <button name="test">fev</button>
        <script>
            var text=document.getElementsByClassName('test');//1
            var text_id=document.getElementById('test');//2
            var text_name=document.getElementsByName('test');//3
            var text_tagname=document.getElementsByTagName('button');//4
            var btn=document.body.getElementsByTagName("button");//5
            text [0].innerHTML="切";
            text [1].innerHTML='第二个按钮';
            text_id.innerHTML='id is you !';
            console.log(text[0]);
            console.log(text[1]);
            console.log(text_id);
            console.log(text_name);
            console.log(text_name[0]);
            console.log(text_tagname);
            console.log(btn);
        </script>
    </body>
    </html>

**2.dom元素的事件**

**分为键盘事件   鼠标事件   窗口事件  移动端的事件（触屏）等等多种，在js中，要在事件的前面加上 on ；（通俗来说，就是获取了元素后对它操作方法的不同做出的响应）**

*  **在元素的行内来绑定事件**

*简单的程序说明*

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>dom 元素事件</title>
        <script>
            window.onload=function(){
                windowsload();
            }//上面两个配合显示刷新，只有加载完窗口后才触发下列事件
            function windowsload() {
                alert("windows");//弹窗
            }
            function up(){
                console.log('你在按键');    
            }
            function click_btn(){
                alert("你管我？");
            }
            function block(){
                console.log('ni');
            }
        </script>
    </head>
    <body onkeyup="up()">
        <button onclick="click_btn()">button</button>
        <div class="block" style="width: 200px;height: 200px;background-color: aquamarine;" onmouseover="block()"></div>
        
    </body>
    </html>

*  **在脚本区动态绑定事件**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>动态绑定事件</title>
        <script>
            //先将窗口加载完成后在完成事件
            window.onload=function(){
                var btn=document.getElementById('btn');
                btn.onclick=function(){
                    alert('你好');
                }
                var btns=document.getElementsByClassName('btn');
                console.log(btns);
                for(var i=0;i<btns.length;i++){
                    btns[i].onclick=function(){
                        alert('hello');
                        console.log('点我');
                    }
    
                }
            }
        </script>
    </head>
    <body>
        <button id="btn">id</button>
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
        <button class="btn">5</button>
    </body>
    </html>

*  事件的监听（用了老师的代码。总结很详细，且很好理解）

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function (){
                //获取class名称的元素
                var btnlist=document.getElementsByClassName("btnlist");
                /*第三种绑定方式叫事件的监听（事件的委托）*/
                for(var i=0;i<btnlist.length;i++)
                {
                    /*btnlist[i].onclick=function (){
    
                    } //上一种动态绑定写法*/
                    /*addEventListener()  简写方式   事件不带on*/
                    btnlist[i].addEventListener("click",btnSave);//括号中写数组型的名称    执行的函数名称
                    function btnSave(){
                        console.log("my");
    
                        //移除事件的监听
                        // 事件在页面初始化的时候  已经初始化完成  也就是说for已经执行完毕  i已经达到最大值 里面的i就是最大值
                        /*removeEventListener 在移除的时候 addEventListener 里面的内部函数得改成外部函数*/
                        /*this 在事件的回调函数里面指代的是当前事件的执行对象*/
                        this.removeEventListener("click",btnSave);
                    }
                }
            }
        </script>
    </head>
    <body>
    <button class="btnlist">className</button>
    <button class="btnlist">className</button>
    <button class="btnlist">className</button>
    <button class="btnlist">className</button>
    <button class="btnlist">className</button>
    </body>
    </html>

附上我的无备注代码以加深理解！

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>监听</title>
        <script>
            window.onload=function(){
                var btn_list=document.getElementsByClassName('btn_list');
                for(var i=0;i<btn_list.length;i++){
                    btn_list[i].addEventListener('click',btnSave);
                    function btnSave(){
                        console.log('my');
                        this.removeEventListener('click',btnSave);
                    }  
                }
            }
        </script>
    </head>
    <body>
        <button class="btn_list">1</button>
        <button class="btn_list">2</button>
        <button class="btn_list">3</button>
        <button class="btn_list">4</button>
        <button class="btn_list">5</button>
    </body>
    </html>

> 至此，dom元素的获取和dom事件的执行大体上有了一个较全面的总结。
> 
> 温故而知新！！！