节点操作以及事件高级

今日重点：
一、节点操作
1、删除节点
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
this.disabled = true; 不再点击
2、删除留言案例
阻止链接跳转需要添加javascript:; 或者javascript:void(0)
3、复制（克隆）节点
node.cloneNode()方法返回调用该方法节点的一个副本。也成为克隆节点/拷贝节点
注：（1）如果括号参数为空或者为false，则为浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
（2）如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
4、动态生成表格案例
5、创建元素的三种方式
1）document.write()
2）element.innerHTML
3）document.createElement()
区别：（1）document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
（2）element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
（3）element.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
（4）createElement() 创建多个元素效率稍低一点点，但结构更清晰
总结：不同浏览器下，innerHTML效率要比createElement高
6、innerTHML和createElement效率对比
（1）innerHTML字符串拼接方式（效率低）
（2）createElement方式（效率一般）
（3）innerHTML数组方式（效率高）
二、DOM的核心总结
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
1、创建
（1）document.write
（2）innerHTML
（3）createElement
2、增加
（1）appendChild
（2）insertBefore
3、删
（1）removeChild
4、改
主要修改dom的元素属性，dom的元素的内容、属性、表单的值
（1）修改元素属性：src、href、title等
（2）修改普通元素内容：innerHTML、innerText
（3）修改表单元素：value、type、disabled等
（4）修改元素样式：style、className
5、查
主要获取查询的dom元素
（1）DOM提供的API方法：getElementById、getElementsByTagName
（2）H5提供的新方法：querySelector、querySelectorAll
（3）利用节点操作获取元素：父（parentNode）、子（children）、兄（prevousElementSibling、nextElementSibling）
6、属性操作
主要针对自定义属性：
（1）setAttribute：设置dom的属性值
（2）getAttribute：得到dom的属性值
（3）removeAttribute：移除属性
三、事件高级
1、注册事件两种方式
1）传统注册方式：on开头的事件
特点：注册时间的唯一性
2）addEventListener(‘事件类型’,function(){}) **
同一个元素同一个事件可以添加多个侦听器（事件处理程序） **
2、事件监听：addEventListener()
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
3、删除事件（解绑事件）
（1）传统注册方式
eventTarget.onclick = null;
（2）方法监听注册方式
元素对象.removeEventListener(事件类型, 被移除事件的函数名字fn);
4、DOM事件流
DOM 事件流会经历3个阶段：
1）捕获阶段
2）当前目标阶段
3）冒泡阶段
（1）JS 代码中只能执行捕获或者冒泡其中的一个阶段。
（2）onclick 和 attachEvent（ie） 只能得到冒泡阶段。
（3）捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
（4）冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
5、事件对象
1）什么是事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
2）事件对象的使用
（1）event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
（2）事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
（3）事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
（4）这个事件对象我们可以自己命名 比如 event 、 evt、 e
（5）事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
3）事件对象的属性和方法

4）e.target 和 this 的区别
（1）this 是事件绑定的元素--这个函数的调用者（也就是绑定这个事件的元素）
（2）e.target 是事件触发的元素
5、 阻止默认行为
html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
e.preventDefault(); // dom 标准写法
6、阻止事件冒泡
好处：可以阻止事件的传播。
e.stopPropagation() --- 标准写法 --- 阻止冒泡
7、事件委托 e.target
简单理解 --- 把事情委托给别人，代为处理。
原理 -- 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
作用 -- 举例：我们只操作了一次 DOM ，提高了程序的性能；而且动态新创建的子元素，也拥有事件。
四、常用鼠标事件

1）禁止鼠标右键菜单 contextmenu
2）禁止鼠标选中 selectstart
3）鼠标事件对象
（1）e.clientX;e.clientY -- 浏览器窗口可视区的 x y 坐标值。
（2）e.pageX; e.pageY -- 鼠标在页面文档的x和y坐标 --- 看见的频率比较高！
（3）e.screenX；e.screenY -- 鼠标相对于电脑屏幕的x y 坐标。
4）跟随鼠标的天使
（1）核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个坐标x和y坐标做为图片的top和left值就可以移动图片
（2）onmousemove -- 鼠标移动事件
onmouseover -- 鼠标移动上去进入才触发
onmouseout -- 鼠标离开
有关自定义属性及节点操作 请点击a=href"https://www.cnblogs.com/kk199578/p/14123238.html"