Dom的核心总结

概念

1 文档对象模型（Document Object Model，简称DOM），是w3c组织推荐的处理可扩展标记语言（HTML或者Xml）的标准编程接口。
2 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页内容，结构和样式。
3 对于javaScript，为了能够使javascript操作HTML，javascript就有一套自己的都没编程接口。
4 对于html，dom使HTML形成一颗树，包含文档，元素，节点
（我们获取过来的 DOM元素是一个对象（object）所以称为文档对象模型）。

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

创建Dom

1 document.write
2 innerHTML
3 createElement

添加

1 appendChild
2 insertBefore

删除

removeChild

改

主要修改dom的元素属性，dom元素的内容，属性，表单的值等
1 修改元素的属性：src,href,title等
2 修改普通元素内容：innerHrml ,innerText
3 修改表单元素: value,type,disabled等
4 修改元素样式 ： style，className

查

主要获取查询dom的元素
1 Dom提供的API的方法：getElementById，getElementByTagName。
2 H5提供的新方法： querySelector，querySelectorAll
3 利用节点操作获取元素：父节点（parentNode），子节点(children)，兄弟节点（previousElementSibling，nextElementSibling）提倡

属性操作

主要针对于自定义属性
1 setAttribute : 设置dom的属性值
2 getAttribute:得到dom的属性值
3 removeAttribute 移动属性

事件高级

注册事件(有2种方式)

image.png

事件监听

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

image.png

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

image.png

attacheEvent()事件监听（IE678支持

image.png

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

image.png

删除事件

image.png

DOM事件流

事件流会经历的3个阶段：

1 捕获阶段
2 当前目标阶段
3 冒泡阶段

冒泡阶段

 <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        // 给son注册单击事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        // 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        // 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件捕获

 <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
        // document -> html -> body -> father -> son
         var son = document.querySelector('.son');
        // 给son注册单击事件，第3个参数为true
         son.addEventListener('click', function() {
             alert('son');
         }, true);
         var father = document.querySelector('.father');
        // 给father注册单击事件，第3个参数为true
         father.addEventListener('click', function() {
             alert('father');
         }, true);
        // 给document注册单击事件，第3个参数为true
        document.addEventListener('click', function() {
            alert('document');
        }, true)
    </script>

事件对象的属性和方法

image.png

e.target 和 this 的区别

• this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
• e.target 是事件触发的元素。

阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;

阻止事件冒泡

image.png

什么是事件委托

把事件委托给别人，代为处理

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

事件委托的作用

• 我们只操作了一次 DOM ，提高了程序的性能。
• 动态新创建的子元素，也拥有事件。

常用鼠标事件

image.png

案例：禁止选中文字和禁止右键菜单

image.png

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

鼠标事件对象

image.png