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样式

芙蓉姐姐


西施


貂蝉


昭君


凤姐

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[i].style.backgroundColor = '';

        }

        if (e.target != this) {

          e.target.style.backgroundColor = 'red';

        }

      });

2021-05-21 DOM事件流