使用面向对象的方法 点击删除元素
<ul class='list'>
<li> 第一个列表 ~ <span class='del'> 删除 </span>
<li> 第一个列表 ~ <span class='del'> 删除 </span>
</ul><ul class='list'>
<li> 第二个列表 ~ <span class='del'> 删除 </span>
<li> 第二个列表 ~ <span class='del'> 删除 </span>
</ul>js
class Disappear {
construtor (sel){
let that = this;
that.el = Array.from(document.querySelectorAll(sel));
that.el.forEach(item => {
item.addEventListener('click',function(e){
if(e.target.className.indexOf('del') > -1){
that.removeItem.call(that,e.target)
}
})
});
}
removeItem(target){
let that = this;
let parentNode = function (node){
let parent = node.parentNode;
let root = that.el.find(item => item === parent );
if(root){
root.removeChild(node);
}else{
parentNode(parent)
}
};
parentNode(target);
}
}
window.addEventListener('DOMConentLoaded',function(){
new Disappear('.list')
})注解 （从上到下） ：
首先不知道页面有多少个需要点击移除的节点，所以的采用事件委托的方式更加稳妥。
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
class 语法
构造器 当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
如果没有 JavaScript 引擎会自动为它添加一个空的constructor方法。
在class 中 方法之间没有标点
Array.from
转换为标准数组格式
应对未知节点个数
forEach
es6 中遍历数组的防范，不改变原有数组
addEventListener
采用事件委托
indexOf
e.target.className 是一个字符串 使用indexOf 找到符合条件的就是大于0，没有就是小于0
this 指向问题
call接受多个参数，apply 接收数组作为函数执行时的参数
find
找到符合条件的元素就返回该元素，如果没有那就返回undefined ,空数组不执行find
removeChild
移除节点
递归调用
直到找到最外层的根节点
DOMConentLoaded
浏览器渲染页面dom文挡的加载步骤：
1.解析HTML结构。
2.加载外部脚本和css文件。
3.解析并执行脚本代码。
4.DOM树构建完成。(此时会触发DOMContentLoaded事件)
5.加载外部图片等文件。
6.页面加载完毕。(此时会触发load事件)
当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件，而load事件则要等包括图片这些加载完毕才会触发。
我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load。
