1.删除节点
element.removechild(')方法从DOM中删除一个字节点，返回删除的节点。4、
element.removechild(')
2.克隆节点（复制节点）
dlement.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
注意： 括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不可隆里面的子节点。
2.三种动态创建元素和区别
document.write()
element.innerHTML()
docenment.createElement()
区别：
1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3. innerHTML创建读个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement（）创建多个元素效率稍微低一点点，但是结构更清晰
3.DOM核心
文档对象模型，是W3C组织推荐的可扩展标记语言的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、和样式。
1.对于javascript，为了能够使用javascript操作HTML，javascript就有了一套自己的dom编程接口
2.对HTML，dom使得html形成一颗dom数，包含文档、元素、节点。
3.我们获取过来的dom元素是一个对象（object），所以称为文档对象模型
4.事件监听方式addEventListener
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
eventTargetaddEventListener(type,listener[useCapture])
5.DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐渐向上传播到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
6.什么是事件对象
官方理解：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解： 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event,它有很多属性和方法。
事件就是：
1.谁绑定了这个事件。
2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了那个键。
7.e.target和this 区别
e.target返回的是触发事件的对象（元素）this返回的是绑定事件的对象（元素）
e.target点击了那个元素，就返回那个元素的this那个元素绑定了这个点击事件。
8.阻止默认行为（事件）
阻止默认行为（事件） 让链接不跳转 后者让提交按钮不提交
普通浏览器e.preventDefault(); 方法
低版本浏览器 e.returnValue;
9.阻止事件冒泡的像两种方式
阻止事件冒泡
标准写法： 利用事件对象里面的stopPropagtion()方法
e.stopPropagation()
非标准写法： IE6-8利用事件对象cancelBubble属性
cancelBubble=ture
10.事件委托
事件委托
事件委托也称为事件代理，在jQuery里面称为事件委托。
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：
我们只操作了一次DOM，提高了程序的性能
1 - 动态添加列表（加强训练）
题目描述
页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色，具体表现如下图：
1）要求使用到事件委托
css样式
<ul>
<li>芙蓉姐姐</li>
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<li>凤姐</li>
</ul>
<ul></ul>
<button>按钮</button>
js
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
var li = document.createElement('li');
ul.insertBefore(li, ul.children[0]);
ul.children[0].innerHTML = `杨朝丽`;
});
ul.addEventListener('click', function (e) {
for(var i = 0; i<ul.children.length ; i++){
ul.children[i].style.backgroundColor = '';
}
if (e.target != this) {
e.target.style.backgroundColor = 'red';
}
});
