7.24

一、节点操作

1.复制节点（克隆节点）

node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点

注意：

   1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

   2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

2.三种动态创建元素的区别

document.write()

element.innerHTML

document.createEleme

区别

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高。

二、DOM重点核心

（1）对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。

（2）对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点 ,我们获取过来的DOM元素是 一个对象（object），所以称为文档对象模型。

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1.创建

document.write

innerHTML

createElement

2.增

appendChild

insertBefore

3.删

removeChild

4.改

   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)、兄(previousElementSibling、

        nextElementSibling) 提倡

6.属性操作

主要针对于自定义属性。

   1. setAttribute：设置dom的属性值

   2. getAttribute：得到dom的属性值

   3. removeAttribute移除属性

7.事件操作

给元素注册事件，采取  事件源.事件类型 = 事件处理程序

 二、事件

1.注册事件

1.1注册事件概述

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式：

方法监听注册方式：

 1.2 addEventListener 事件监听方式

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对

象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

 type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on

 listener：事件处理函数，事件发生时，会调用该监听函数

 useCapture：可选参数，是一个布尔值，默认是 false。

1.3 attachEvent 事件监听方式

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

 eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on

 callback： 事件处理函数，当目标触发事件时回调函数被调用

注意：IE8 及早期版本支持

1.4 注册事件兼容性解决方案

 

2.注册事件（解绑事件）

删除事件方式：

（1）传统注册方式

eventTarget.onclick = null;

（2）方法监听注册方式

① eventTarget.removeEventListener(type, listener[, useCapture]);

② eventTarget.detachEvent(eventNameWithOn, callback);

3.DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

DOM 事件流分为3个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意

   1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。

   2. onclick 和 attachEvent 只能得到冒泡阶段。

   3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕 获阶段        调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理          程序。

   4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

   5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

 4.事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

语法：

 常见属性和方法：

 5.阻止事件冒泡

阻止事件冒泡的两种方式：

标准写法：利用事件对象里面的 stopPropagation()方法

 

 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

 

6.事件委托

事件委托：事件委托也称为事件代理， 在 jQuery 里面称为事件委派。

事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

事件委托的作用:我们只操作了一次 DOM ，提高了程序的性能。

 7.常用鼠标事件

 鼠标事件对象：

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

 8.常见键盘事件

 事件除了使用鼠标触发，还可以使用键盘触发。

注意：

1. 如果使用addEventListener 不需要加 on

2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。

3. 三个事件的执行顺序是： keydown -- keypress --- keyup

 键盘事件对象：

 一、BOM

1.BOM概述

1.1什么时BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心 对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏 览器标准的一部分。

1.2 BOM的构成

 

   window 对象是浏览器的顶级对象，它具有双重角色。

   1. 它是 JS 访问浏览器窗口的一个接口。

   2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

2.window对象的常见事件

2.1窗口加载事件

 window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

 

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

 2.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

   1. 只要窗口大小发生像素变化，就会触发这个事件。

   2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度。

3. 定时器

3.1两种定时器

setTimeout()

setInterval()

3.2 setTimeout()定时器

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意:

3.3 停止setTimeout()定时器

 

 clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

注意：

3.4 setInterval()定时器

注意：

3.5 停止setInterval()定时器

 

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意：

 3.6 this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象。

4. JS执行队列

4.1 JS是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

4.2 同步和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。

本质区别：这条流水线上各个流程的执行顺序不同

4.3 同步和异步任务执行过程

同步任务：

同步任务都在主线程上执行，形成一个执行栈。

异步任务：

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

4.4 JS执行机制

1. 先执行执行栈中的同步任务。

2. 异步任务（回调函数）放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任 务结束等待状态，进入执行栈，开始执行。