Web-api学习 08：DOM的核心总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47373340/article/details/124716348

本文详细介绍了DOM操作的核心内容，包括元素的创建、增加、删除、修改和查询，以及属性操作和事件操作。重点讲解了事件的注册（包括传统方式和事件监听）和删除，同时提供了兼容性解决方案。此外，还提到了DOM事件流的概念，帮助读者深入理解DOM在网页交互中的作用。

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

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1、创建

2、增

3、删

4、改

5、查

6、属性操作

7、事件操作

7.1 注册事件（2种方式）

7.2 事件监听

7.2.1 addEventListener()事件监听（IE9以后支持）

7.2.2 attacheEvent()事件监听（IE678支持）

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        alert('hi');
    }
    btns[0].onclick = function() {
            alert('hao a u');
        }
   // 2. 事件侦听注册事件 addEventListener 
   // (1) 里面的事件类型是字符串 必定加引号 而且不带on
   // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })
</script>

7.2.3 事件监听兼容性解决方案

7.3 删除事件（解绑事件）

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>