一.节点操作
文章目录
1 . 删除节点
2. 复制（克隆）节点
3. 创建元素的三种方式
4. innerTHML和createElement效率对比
5.DOM学习总结
二.事件高级
1 . 事件监听
2. 事件监听兼容性解决方案
3. 删除事件（解绑事件）
4. 删除事件兼容性解决方案
5. 事件对象
6. e.target 和 this 的区别
7.阻止默认行为
7. 阻止事件冒泡
8.事件委托
9.鼠标事件对象
1. 删除节点
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
// 删除元素 node.removeChild(child)
ul.removeChild(ul.children[0]);
2. 复制（克隆）节点
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
3. 创建元素的三种方式
4. innerTHML和createElement效率对比
innerHTML字符串拼接方式（效率低）
<script>
function fn() {
var d1 = +new Date();
var str = '';
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
createElement方式（效率一般）
<script>
function fn() {
var d1 = +new Date();
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid red';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
innerHTML数组方式（效率高:常用）
<script>
function fn() {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
5.DOM学习总结
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
1.创建：
document.write
innerHTML
createElement
2.增
appendChild
inserBefore
3.删
removeChild
4.改
主要修改dom的元素属性，dom元素的内容、属性、表单的值等
1.元素属性：src、href、title等等
2.普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
4.样式：style、className
5.查
1.API方法：getElementById、getElementByTagName 古老语法，不推荐
2.H5新增：querySelector、querySelectorAll 推荐
3.利用节点操作获取元素：父节点parentNode、子节点children、兄弟previousElementSibling、nextElementSibling 推荐
6.主要针对自定义属性的操作
1.setAttribute:设置dom的属性值
2.getAttribute:得到dom属性值
3.removeAttribute： 移除属性
二.事件高级
1. 事件监听
addEventListener()事件监听（IE9以后支持）
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
2. 事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型：
3. 删除事件（解绑事件）
4. 删除事件兼容性解决方案
5.dom事件流(面试经典)
☆ 事件流 描述的是从页面接收事件的顺序。
☆ 事件 发生时会在元素节点之间按照特定的顺序传播，这个传播过程 就为 DOM事件流
DOM 事件流会经历3个阶段：
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
<div class="father">
<div class="son">son盒子</div>
</div>
// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略
// son -> father ->body -> html -> document
----------------------------------------
// 捕获阶段：如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
5. 事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
常见属性和方法：
6. e.target 和 this 的区别
-
this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
-
e.target 是事件触发的元素。
常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。
7.阻止默认行为
html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
<a href="http://www.baidu.com">百度</a>
<script>
// 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
}
</script>
7. 阻止事件冒泡
8.事件委托
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
9.鼠标事件对象
此部分为习题部分：
动态添加列表
题目描述
页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色，具体表现如下图：
1）要求使用到事件委托
<body>
<ul id="ul">
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<li>凤姐</li>
<li>芙蓉姐姐</li>
</ul>
<input type="button" value="按钮" id="btn" />
<script>
// 利用事件委托（事件冒泡），给新创建的元素也注册上事件
var ul = document.getElementById('ul');
ul.onclick = function (e) {
e.target.style.backgroundColor = 'red';
}
// 单击按钮，添加一个新的li
var btn = document.getElementById('btn');
btn.onclick = function(){
var liObj = document.createElement('li');
liObj.innerHTML = '杨超越';
ul.insertBefore(liObj, ul.children[0]);
}
</script>
</body>
分享
