目录

一、节点操作

（一）删除节点

1、语法

2、案例 

（二）复制节点

1、语法

2、案例

（三）动态生成表格案例

（四）创建事件的三种方式

1、document.write()

2、element.innerHTML

3、document.createElement()

4、区别

（五）DOM重点核心回顾

1、创建

2、增

3、删

4、改

5、查

6、属性操作

 二、事件高级

（一）注册事件（绑定事件）

1、传统注册方式

2、方法监听注册方式

（二）删除事件（解绑事件）

1、传统注册方式删除事件

2、方法监听注册方式删除事件

（三）DOM事件流

（四）事件对象

1、事件对象的使用语法

2、e.target和this的区别

（五）阻止事件冒泡

（六）阻止默认行为

（七）事件委托

1、事件委托的原理

2、案例​​​​​​​

（八）常见鼠标事件

1、禁止鼠标右键菜单

2、禁止鼠标选中

3、鼠标事件对象

4、获取鼠标在页面的坐标

一、节点操作

（一）删除节点

1、语法

node.removeChild(child)     

2、案例 

（二）复制节点 1、语法

node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容。

node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容。

2、案例

（三）动态生成表格案例

（四）创建事件的三种方式

1、document.write()

如果页面文档流加载完毕，再调用这句话会导致页面重绘。

 var btn = document.querySelector('button');
         btn.onclick = function() {
             document.write('123');
         }

2、element.innerHTML

var inner = document.querySelector('.inner');
         for (var i = 0; i <= 100; i++) {
             inner.innerHTML += '百度'
         }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('百度');
        }
        inner.innerHTML = arr.join('');

3、document.createElement()

var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    

4、区别

①document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

②innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘。

③innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

④createElement() 创建多个元素效率稍低一点点，但是结构更清晰。

（五）DOM重点核心回顾

1、创建

① document.write

② innerHTML

③ creatElement

2、增

appendChild

insertBefore

3、删

removeChild

4、改

//主要修改dom的元素的属性，dom元素的内容，属性，表单的值等

① 修改原元素的属性：src、href、title等；
② 修改普通的内容：innerHTML、innerText；
③ 修改表单的属性：value、type、disabled等；
④ 修改元素样式：style、className；

5、查

①DOM提供的API 方法： getElementById、getElementsByTagName 

②H5提供的新方法： querySelector、querySelectorAll 提倡
​​​​​​​
③利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling)

6、属性操作

① setAttribute：设置dom的属性值
② getAttribute：得到dom的属性值
③ removeAttribute移除属性

 二、事件高级

（一）注册事件（绑定事件）

1、传统注册方式

• 利用 on 开头的事件 onclick
• btn.onclick = function() {}
• 特点： 注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

2、方法监听注册方式

• w3c 标准 推荐方式
• addEventListener() 它是一个方法
• IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
• 特点：同一个元素同一个事件可以注册多个监听器  按注册顺序依次执行

语法：eventTarget.addEventListener(type, listener[, useCapture])

type： 事件类型字符串，比如 click 、mouseover ，注意这里不要带 on listener： 事件处理函数，事件发生时，会调用该监听函数 useCapture ：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

（二）删除事件（解绑事件）

1、传统注册方式删除事件

语法：

eventTarget.onclick = null;

2、方法监听注册方式删除事件

语法：

eventTarget.removeEventListener(type, listener[, useCapture]);

（三）DOM事件流

DOM事件流分为3个阶段：

1、捕获阶段

2、当前目标阶段

3、冒泡阶段

1、JS 代码中只能执行捕获或者冒泡其中的一个阶段。 2、 onclick 和 attachEvent 只能得到冒泡阶段。 3、addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕 获阶段调用事件处理程序；如果是 false（不写默认就是 false ），表示在事件冒泡阶段调用事 件处理 程序。 4、实际开发中我们很少使用事件捕获，我们更关注事件冒泡。 ​​​​​​​ 5、有些事件是没有冒泡的，比如 onblur 、 onfocus 、 onmouseenter、onmouseleave

（四）事件对象

1、事件对象的使用语法

eventTarget.onclick = function(event) {event} 
 eventTarget.addEventListener('click', function(event) {}）
 // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
 //这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
 //当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

2、e.target和this的区别

• this 是事件绑定的元素（绑定这个事件处理函数的元素） 。

• e.target 是事件触发的元素。

（五）阻止事件冒泡 事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。 语法： e.stopPropagation()；

（六）阻止默认行为 语法： e.preventDefault();

（七）事件委托

1、事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

2、案例

    

        
键盘敲烂，工资过万
        
键盘敲烂，工资过万
        
键盘敲烂，工资过万
        
键盘敲烂，工资过万
        
键盘敲烂，工资过万
    
    

（八）常见鼠标事件

1、禁止鼠标右键菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2、禁止鼠标选中

 document.addEventListener('selectstart', function(e) {
 e.preventDefault();
 })

3、鼠标事件对象

4、获取鼠标在页面的坐标