BOM和DOM

Web APIs阶段

1.Web APIs 是W3C组织的标准
2.Web APIs 我们主要学习DOM和BOM
3.Web APIs 是JS独有的部分
4.主要学习页面交互功能
5.基础部分，到此结束，正戏拉开帷幕。

一、API 和 Web API

1.API 应用程序编程接口，提供的一种工具，以便于实现想要的功能，只需会用。
2.Web API 是–浏览器–提供的一套操作浏览器功能和页面元素得到API，alert属于浏览器API，用于实现页面的交互效果。WebAPI一般有输入输出(传参和返回值)，Web API很多都是方法(函数)。

二、DOM

1.DOM简介：文档对象模型，W3C推荐的处理可扩展标记语言(HTML或XML)的标准编程–接口–。
作用：通过DOM接口，可以改变网页的结构，内容和样式。
2.DOM树

文档:一个页面就是一个文档，DOM中用document表示
元素:页面中的作用标签都是元素，DOM中使用element表示
节点:网页中所有内容都是节点(标签、实现、文本、注释等)，DOM中使用node表示
DOM把以上内容都看作是对象，获取过来的BOM元素是一个对象
3.获取元素：
(1).根据ID获取，使用getElementById(id),id大小写敏感。
1.因为文档从上往下加载，所以先得有标签，所以script写到标签下面
2.参数id大小写敏感的字符串
3.返回的是一个元素对象
console.dir 打印返回 的元素对象，更好的查看里面的属性和方法
(2).根据标签名获取，getElementByTagName()可以返回指定标签名的对象的集合
注意：a.因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
b.得到的元素是动态的，只需修改元素本身的内容，JS部分不用修改
1.返回的是获取过来元素对象的集合，以伪数组的方式存储的
2.要一次打印里面的元素对象，我们可以用遍历的方式
3.如果页面中只要一个li，返回的也是伪数组形式
4.如果页面中没有这个元素，则返回的是一个空的伪数组
5.element.getElementByTagName(‘标签名’);
注意：a.父元素不能是伪数组
b.父元素必须指明是哪一个元素，获取的时候不包括父元素自己
(3).通过id获取元素, document.getElementById()
(4).通过HTML5新增的元素获取(不考虑兼容)
1.根据类名获取某些元素 getElementsByClassName(‘类名’)
2.querySelector(‘选择器’) 返回指定选择器的第一个元素对象
3.querySelectorAll(‘选择器’) 返回指定选择器里的所有对象集合
注意：querySelector(‘选择器’),里面的选择器需要加符号,例如： .box,#nav
(5).获取body和html元素
1.获取body元素， var bodyEle = document.body;
2.获取html元素，var htmlEle = document.documentElement;
4.事件基础：触发响应的一种机制
事件三要素：事件源(比如按钮)，事件类型(点击(onClick),鼠标经过)，事件处理程序 (匿名函数 赋值的方式)
5.操作元素，核心
(1).改变元素内容
element.innerText可以修改元素内容，不识别html标签，非标准，去除空格和换行
element.innerHTML ,识别html标签，W3C标准，保留空格，和换行符这两个元素是可读写的， 可以获取元素内容 --常用–
(2).属性操作 元素.属性 = ‘’ src ，href，title，alt等
(3).表单元素的属性操作
表单中的值文字是通过value修改的
表单中某个元素禁用，不能再点击 disabled
(4).样式属性操作：
element.style 行内样式操作
注意：JS中样式采用驼峰命名法，JS修改了style样式，产生的是行内样式，权重高如果样式比少， 或者功能简单的情况下使用
element.className 类名样式操作，适合于样式较多或者功能复杂的情况，让当前元素的类名改 为…,className会直接更改元素的类名，会覆盖原来的类名。如果想要保留原先的类名： this.className = ‘first second’;
6.排他思想 --重要–
同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
(1).所有元素清除格式
(2).给当前元素设置样式
(3).注意顺序不能颠倒
7.获取元素的属性值：属性是可以自己添加的
(1).element.属性 ，获取内置属性值，元素本身自带
(2).element.getAttribute(‘属性’)，自己添加的属性。叫自定义属性，可获取自定义属性值
8.设置属性值
(1).element.属性 = ‘值’，针对内置属性
(2).element.setAttribute(‘属性’,‘值’) 主要针对于自定义属性
注意：class特殊里面写的就是class 不是className
9.移除属性：removeAttribute(属性)
10.H5自定义属性，为了保存并使用数据。使用getAttribute(‘属性’)获取，不容易判断是元素的内置属性还是自定义属性。所以H5规定：自定义属性以data-开头作为属性名并且赋值。
获取H5自定义属性： 1.兼容性获取 ，element.getAttribute(‘属性名’)
2.H5新增,element.dataset.index或者element.dataset[‘index’]
注意：
(1).H5新增获取自定义属性方法，只能获取data开头的自定义属性
(2).dataset是一个集合里面存放了所有以data开头的自定义属性，但是只有ie11以上支持
(3).如果自定义属性里有多个**-连接的单词，获取的时候采取驼峰命名法
11.节点操作
(1).利用DOM提供 的方法获取元素，比如document.getElementById()…,缺点逻辑性不强繁琐
(2).利用节点层级关系获取元素**，利用父子兄弟节点关系获取元素，逻辑性强，但兼容性差，用起来简 单，网页中所有内容都是节点，再DOM中节点用node表示DOM树中的所有节点均可以通过JS访问， 所有节点均可被修改，也可以创建或删除
(3).一般情况下，节点至少拥有nodeType,nodeName,nodeValue这三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3(包括文字，空格，换行等)
实际开发中主要操作元素节点
(4).节点层级，常见的是父子兄层级关系
1.父级节点，node.parentNode,得到的是离元素最近的父节点,找不到父节点返回null
2.子节点，childNodes得到的包含元素节点，文本节点等，nodeType判断是不是元素节点
3.children 获取所有的子元素节点,实际开发常用
4.子节点，parentNode.firstChild,返回第一个子节点，找不到返回null
parentNode.lastChild,返回最后一个子节点，不管是文本节点还是元素节点
firstElementChild 返回第一个子元素节点
lastElementChild 返回最后一个子元素节点,这两个方法有兼容性问题
实际开发写法，既没有兼容性问题，也可以返回第一个元素：
–children[索引]–
5.兄弟节点
nextSibling 下一个兄弟节点，包含元素节点和文本节点
previousSibling 上一个
nextElementSibling 得到下一个兄弟元素节点
previousElementSibling 上一个
(5).创建节点，document.createElement(‘tagName’) ,动态创建元素节点
添加节点，node.appendChild(child),node是父级，child是子级,后面追加元素
node.insertBefore(child,指定元素)，将一个节点添加到父节点的指定子节点前面
(6).删除节点，node.removeChild(child) 从DOM中地删除一个子节点，返回删除的节点
(7).复制节点，node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点
注意：如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不会克隆里面的 子节点，只复制标签，不复制内容，如果括号里为true，那就是深拷贝，标签加内容一起拷贝
(8).三种动态创建元素的区别–面试–
1.document.write(),当文档流加载完毕，导致整个页面重绘,很少使用
2.innerHTML创建元素，创建多个元素效率更高，(不要采用拼接字符串，采用数组形式拼接)， 结构稍微复杂(需要放入数组，还要把数组转为字符串)。
3.document.createElement() 创建元素，效率会低一些，但是结构更清晰
12.事件高级
(1).注册事件：

​ 1.传统，on开头的事件，onclick，特点：注册事件的唯一性，后面的注册函数会覆盖前面注册的处 理函数。
​ 2.方法监听，W3C推荐，addEbentListener()，是个方法，还是有兼容问题，特点，同一个于 所同一个事件可以注册多个监听器(事件处理程序)，依次执行
​ (2).addEventListener() 事件监听
​ eventTarget.addEventListener(type,listener[,useCapture]),该方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定事件时，就会执行事件处理函数。
​ 三个参数：
​ 1.type：事件类型字符串，eg:click，mouseover，这里不需要带on，字符串类型
​ 2.listener：事件处理函数，事件发生时会调用该监听函数
​ 2.useCapture：可选参数，是一个布尔值，默认为false。
​ (3).attachEvent(eventNameWithOn，callback) ie9以下支持，别用就行,ie独有
​ (4).删除事件(解绑事件)
​ 1.传统，evementTarget.onclick = null;
​ 2.方法监听注册方式， eventTarget.removeEventListener(type,listener[,useCapture])
​ 3.如果ie9以下，detachevent(eventNameWithOn，callback)
​ (5).DOM事件流：事件传播的过程
​ 1.三阶段：1.捕获阶段(从上往下依次传播)，2.当前目标阶段，3.冒泡阶段(从下往上传播)
​ eg：注册了一个div事件，虽然是给div注册了点击事件，它在执行时并不是直接给div执行，二手按照最外层Document先接受到点击事件，因为我们没有给document绑定任何事件所以会接着往下传播，然后时传到HTML，HTML接受到点击事件，HTML也没有绑定，也略过，接着往下到Body，Body接受到点击事件，也略过，最后才到div身上，这个阶段我们称之为捕获阶段，从上往下找，找到了div后，div这个阶段叫目标阶段，div执行完毕，往上传，body又接受到点击事件，没有绑定，接着往上传播，html >>document，结束，从底层一层一层传播到顶层的阶段叫冒泡阶段，虽然是给div的点击事件，但是最外面的元素节点都会接受到点击事件，它会按照一定的顺序依次传播，见图：

​ 2.代码验证
​ 注意：1.JS代码中只能执行捕获或者冒泡中的一个阶段
​ 2.onclick 和 attachEvent 只能得到冒泡阶段
​ 3.捕获阶段，如果addEventListener第三个参数时true，那么则处于捕获阶段
​ 4.如果addEventListener第三个参数时false，或者省略，那么则处于冒泡阶段
​ son -> father -> body ->html ->document
​ 5.实际开发中我们很少使用事件捕获，我们更关注事件冒泡
​ 6.有些事件是没有冒泡的，比如：onblur,onfocus,onmouseenter,onmouseleave

​ (6)事件对象

div.onclick = function (event) {}

​ 1.event就是一个事件对象，写到侦听函数的小括号里面，可以当形参来看

​ 2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

​ 3.事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含 了鼠标的相关信息，如果是键盘事件就包含键盘事件信息，比如判断用户按下了哪个键

​ 4.这个事件对象我们可以自己命名，比如：event，ev，e

​ 5.事件对象也有兼容性问题 IE678 通过window.event兼容性写法，e = e || window.event

​ 6.简单来说，直接用就行

​ (7)事件对象常见属性和标准写法

​ e.target :返回触发事件的对象(标准)，e.target 和 this的区别 ，e.target 点击了哪个元素，就返回 那个元素，this那个元素绑定了这个点击事件，那么就返回谁

​ e.srcElement :返回触发事件的对象(非标准，ie6-8使用)

​ e.type :返回事件类型，比如click mouseover 不带on

​ e.cancelBubble :该属性阻止冒泡(非标准，ie6-8使用)

​ e.returnValue :该属性阻止默认事件(默认行为) 非标准 ，ie6-8使用 比如不让连接跳转

​ e.preventDefaults() :该方法阻止默认事件(默认行为) 标准 比如不让链接跳转

​ 传统阻止默认行为方式(绑定onclick事件)：

​ 1.普通浏览器 e.preventDefault(); 方法

​ 2.低版本浏览器，ie678 returnValue 属性

​ 3.return false 也能阻止默认行为，没有兼容性问题，特点:return后面的代码不执行

​ e.stopPropagation() :阻止冒泡 标准

​ 阻止事件冒泡:

​ 1.e.stopPropagation() 标准 同样有兼容性问题

​ 2.e.cancelBubble = true 非标准，低版本使用

​ (8)事件委托(面试)

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

​ 2.事件委托原理：不是每个节点单独设置 监听器，而是事件监听器设置在其父节点上，然后利 用冒泡原理影响设置每个子节点，给父节点添加侦听器，利用事件冒泡影响每一个子节点

​ 3.作用：只操作了一次DOM，大大提高了程序性能。

var ul = document.querySelector('ul');
ul.addEventListener('click',function (e) {
     //alert('123');
     //e.target 这个可以得到我们的剪辑对象
     e.target.style.backgroundColor = 'pink';
})

​ (9)常用的鼠标事件

​ onclick,onmouseover,onmouseout,onfocus,onblur,

​ new1:禁止鼠标右键菜单：contextmenu,主要控制应该何时显示上下文菜单，主要用于程序员取 消默认的上下文菜单

document.addEventListener('contextmenu',function (e) {
     e.preventDefault();
})

​ new2：禁止鼠标选中，selectstart 开始选中，

document.addEventListener('selectstart',function (e) {
     e.preventDefault();
})

​ new3：mousemove 鼠标移动事件

​ (10)鼠标事件对象

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

​ e.clientX ,返回鼠标相对于浏览器窗口可视区的X坐标，鼠标可视区的x和y坐标

​ e.clientY ,返回鼠标相对于浏览器窗口可视区的Y坐标，鼠标可视区的x和y坐标

​ e.pageX,返回鼠标相对于文档页面的X坐标 IE9+支持

​ e.pageY,返回鼠标相对于文档页面的Y坐标 IE9+支持

​ e.screenX,返回鼠标相对于电脑屏幕的X坐标

​ e.screenY,返回鼠标相对于电脑屏幕的Y坐标

​ (11)常用的键盘事件

​ onkeyup,mou某个键盘按键被松开使触发

​ onkeydown,mou某个键盘按键被按下使触发

​ onkeypress,某个键盘按键被按下使触发，但它不识别功能键，比如ctrl shift 箭头等

​ (12)键盘事件对象

​ 键盘事件对象属性：keycode ，返回该键的ASCII码值

​ 注意：

​ 1.keyup和keydown 事件不区分大小写 a 和 A 得到 的都是65

​ 2.keypress事件区分大小写

​ 3.可以利用keycode返回的ASCII码值来判断用户按下了那个键

三、BOM

1.概念：BOM，是浏览器对象模型，它提供了独立内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都规定了很多方法与属性。

DOM与BOM的区别

DOM：

​ 1.文档对象模型

​ 2.DOM就是把文档当作一个对象来看

​ 3.DOM的顶级对象是document

​ 4.DOM主要学习的是操作页面元素

​ 5.DOM是W3C标准规范

BOM：

​ 1.浏览器对象模型

​ 2.把浏览器当作是一个对象来看

​ 3.BOM的顶级对象是window

​ 4.BOM学习的是浏览器窗口交互的一些对象

​ 5.BOM是浏览器厂商在各自浏览器上定义的，兼容性差

2.BOM构成

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

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

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

​ 3.在调用的时候可以省略window前面学习的对话框都属于window对象方法如alert(),prompt()等

​ 注意：window下的一个特殊属性：window.name

//window.document.querySelector();
var num = 10;
console.log(num)
console.log(window.num);
function fn() {
   console.log(11);
}
fn();
window.fn();
alert(11);
window.alert(11);
console.dir(window);

3.页面加载事件

​ (1).窗口加载事件：window.onload = function(){}

​ window.addEventListener(“load”,function(){})

​ 当文档内容完全加载完毕会触发该事件(包括图像，脚本文件，CSS文件等)，就调用的处理函数。

​ 注意：

​ 1.有了window.onload 就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

​ 2.window.onload 传统注册事件方式只能写一次，如果有多个会以最后一个window.onload为准

​ 3.如果使用addEventListener 则没有限制

​ (2).窗口加载事件2：

​ document.addEventListener(“DOMContentLoaded”,function(){})

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

​ IE9以上才支持

​ 如果页面的图片很多的话，从用户访问到onload触发可能需要大量的时间，交互效果就不能实现，必然影响用户的体验，此时 用DOMContentLoaded时间比较合适。

​ 两个加载事件的区别：load等页面全部加载完毕，包含页面DOM元素，图片 flash，css等，

​ DOMContentLoaded 时DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些

​ (3)调整窗口大小事件

​ window.onresize = function(){}

​ window.addEventListener(“resize”,function(){})

​ 是调整窗口大小加载事件，当触发时就调用的处理函数

​ 注意：

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

​ 2.经常利用这个事件完成相应式布局，window.innerWidth 当前的屏幕宽度

​ (4)定时器

​ 两种定时器：

​ 1.setTimeout()

​ 用法:window.setTimeOut(调用函数,[延迟的毫秒数])，前面的window可省略，延迟时间单位是毫秒，可以省略，省略 后值为0，这个调用函数可以直接写匿名函数，也可以调用外部定义的函数名。页面中可能有很多定时器，我们经常给定时器加标识符(起个名)

​ 设置一个定时器，该定时器在定时器到期后执行调用函数。

​ setTimeout()，这个调用函数也称为回调函数callback

​ 普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才会调用此函数，因此叫做回调函数

​ 以前学的 element.onclick = function(){} 或者 element.addEventListener(“click”,fn),也是回调函数

​ 如何停止setTimeout()定时器，window.clearTimeout(timeout ID)

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

​ 注意：

​ 1.window也是可以省略的

​ 2.里面的参数就是定时器的标识符(就是你给起的名字)

​ 2.setInterval()

​ 用法:window.setInterval(回调函数，[间隔的毫秒数])

​ setInterval() 方法重复调用一个函数，每个这个时间，就去调用一次回调函数，这个函数一但开启，永不停歇

​ 如何停止setInterval())定时器，window.clearInterval(interval ID)

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

​ 注意：

​ 1.window也是可以省略的

​ 2.里面的参数就是定时器的标识符(就是你给起的名字)

​ 注意：

​ 1.window依然可以省略

​ 2.这个调用函数可以直接写函数，或者写函数名，或者采取字符串"函数名()"的方式3种

​ 3.间隔的毫秒数省略默认是0，如果写必须是毫秒，表示每隔多少秒就自动调用这个函数

​ 4.页面中可能有很多定时器，我们经常给定时器加标识符(起个名)

​ 3.setTimeout()和setInterval()区别

​ a. setTimeout(),延时时间到了，就去调用这个回调函数只调用一次，就结束这个定时器

​ b. setInterval 每隔这个延时时间，就去调用这个回调函数，重复调用这个函数

4.this的指向问题

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

​ (1)全局作用域或者普通函数中this指向全局对象window(注意：定时器中的this指向window)

console.log(this)
function fn() {
  console.log(this);
}
window.fn();
setTimeout(function () {
   console.log(this)
},1000)

​ (2)方法调用中谁调用this指向谁

var o = {
    sayHi:function () {
        console.log(this)//this指向的是o这个对象
    }
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this)//this指向的是btn这个按钮对象
}
btn.addEventListener('click',function () {
    console.log(this)//this指向的是btn这个按钮对象
})
</script>

​ (3)构造函数中this指向构造函数的实例

function fun() {
    console.log(this)//this指向的是fun实例对象
}
var fun = new fun();

5.JS执行队列

​ (1)JS是单线程：JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事，这是以你为JS 这门脚本语言诞生的使命所致：JS是为了处理页面中的哦那过户交互，以及操作DOM而但是的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先添加后删除。

​ 单线程就意味着，所有任务都需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题 是，如果JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面出现渲染加载阻塞的感觉。

​ 第一个问题：

console.log(1);
setTimeout(function () {
   console.log(3)
},1000)
console.log(2);

​ JS为了解决这个问题，利用多核cpu的计算能力，HTML5提出Web Worker 标准，允许Javascript脚 本创建多个线程，于是，JS中出现了同步和异步

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

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

​ 所以JS中虽然是单线程语言，但是允许创建多个任务的，所以第一个问题的执行结果是：1，2，3。

​ 他们的本质区别：一条流水线上各个流程的执行顺序不一样。

​ 第二个问题：执行结果依然是1，2，3。 为什么?

console.log(1)
setTimeout(function () {
   console.log(3)
},0)
console.log(2)

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

​ 异步任务：JS的异步是通过回调函数实现的，一般而言异步任务由以下三种类型

​ 1.普通事件，如click，resize等

​ 2.资源加载，如load，error等

​ 3.定时器，包括setInterval，setTimeout等

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

​ (2)JS的执行机制

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

​ 2.异步任务(回调函数)放入任务队列中，如果遇到回调函数，把里面的回调函数放到任务队列中，先放过去，不执行，放完之后再执行下一个同步任务。

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

​ 所以第二个问题结果依然是1，2，3

​ 优点：如果其中有一个任务的花费时间较长，比如说跟时间有关系的回调函数一般需要等待时间，就把他们都放到异步中去，好比是执行栈就是一个主车道，所有车都畅通无阻正在行驶，忽然有一辆车坏了。造成堵车，花费时间就比较长，所有把坏车换到应急车道上(也就是任务队列)，这样就不影响主车道行驶，这样就大大提高了执行效率。

​ 4.

console.log(1);
document.onclick = function () {
    console.log('click');
}
console.log(2);
setTimeout(function () {
   console.log(3)
},3000)

​ 如图，1.先执行第一个同步任务并且打印出来(1)。2.然后执行第二句话，里面有一个(回调函数)，是异步任务，这时会把这句话提交给异步进程处理，只有点击了异步任务处理才会把回调函数这个异步任务写到异步任务队列中，如果不点击，他是不写到任务队列中去的，也就是说，如果不点击，这个回调函数是不会出现再异步任务队列中的。3.继续执行第三句，打印出结果(2)。4.最后执行第4句话，这也是一个异步任务，所以它也会被提交给异步进程处理，只有3秒时间到了，异步进程处理才会把这个回调函数写到异步任务队列中。写进去是不执行的，只有等同步任务全部执行完毕后，它才会依次执行。

​ 同步任务完成后，打印了(1,2),然后回到异步任务队列中去看有没有异步任务，有的话，拿到执行栈中，去执行，然后3秒后再打印(console.log(3))，前提是没有执行onclick事件。当这个任务执行完毕后，任务队列就是空状态。刚刚的第二句已经提交给异步进程处理了，它就等着点击呢，点击后,它就把回调函数(异步任务)写到异步任务队列中去，原来的异步任务队列为空，点击之后再写一个新的异步任务进去(console.log(‘click’))，虽然同步任务已经结束，但是它还会回去看异步任务队列中还有没有新的任务进来，有的话，它再把这个异步任务拿过来放到执行栈中再去执行，所以最后又打印了一个(console.log(‘click’))。最后执行结果为1，2，3，click

​ 点击完之后，异步任务处理完毕之后，异步任务队列又进行清空，如果再点击一下，异步任务又把这个任务拿过来，任务队列中又有了新消息，同步任务还会回来看有没有新的异步任务，如果有的话，再拿过来再执行。虽然同步任务已经全部完成，但是它还回去异步任务队列中去看看有么有新的异步任务，如果有，拿回去执行。然后同步任务还会回头重复的看任务队列中有没有新的异步任务，有，再执行。这个反复执行的过程，称之为事件循环(event loop)，这样反复检查，就不会有异步任务被落下

​ 简单来说：由于主线程不断的重复获得任务执行任务，再获取任务，再执行，这种机制叫事件循环

6.location对象

​ (1)定义：window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析 URL，这个属性返回的是一个对象，所以这个属性也称为location对象

​ (2)URL:统一资源定位符，式互联网是标准资源的地址，互联网是每一个文件都有一个唯一的URL，它 包含的信息指出文件的位置以及浏览器该怎么处理它。

​ URL的一般语法格式

​ protocol://host[:port]/path/[?query]#fragment

​ http://www.itcast.cn/index.html?name=andy&age=18#link

​ protocol:通信协议，常用http,ftp,maito等

​ host:主机(域名) www.itcast.cn

​ port:端口号(可选)，省略时使用方案的默认端口，如http默认端口为80

​ path:路径由零或多个/隔开的字符串，一般用来表示主机是的一个目录或文件地址

​ query:参数 以键值对的形式，通过&符号隔开

​ fragment:片段，#后内容常用于链接锚点

​ (3)location对象的属性

​ location.href:获取或设置整个url

​ location.host:返回主机(域名)

​ location.port:返回端口号，没有写返回空字符串

​ location.pathname:返回路径

​ location.search:返回参数

​ location.hash:返回片段，#后内容常用于链接锚点

​ (4)location对象的方法

​ location.assign(),跟href一样，可以跳转页面(也称为重定向页面)，记录浏览历史，可实现后退功能

​ location.replace(),替换当前页面，因为不记录历史，所以不能后退页面

​ location.reload,重新加载页面，相当于刷新按钮或者f5 如果参数为true 强制刷新ctrl+f5

7.navigator对象

​ 这个对象包含有关浏览器的信息，它有很多属性，我们最常用的就是userAgent，该属性可以返回由 客户端发送服务器的useragent头部的值。

8.history对象

​ window对象给我们提供了一个history对象，与浏览器历史纪录进行交互，该对象包含用户(在浏览器 窗口中)访问过的URL

​ back()，后退功能

​ forward(),前进功能

​ go(参数)，前进后退功能，参数是1，前进一个页面，参数是-1，后退一个页面

四、PC端网页特效

1.元素偏移量offset系列

​ (1).offset概述

​ offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大 小等。获得元素距离带有定位父元素的位置，获得元素自身的大小(宽高)，注意，返回的数值都不带 单位。

​ (2)offset系列常用属性

​ element.offsetParent ,返回作为该元素带有定位的父级元素，如果父级没有定位则返回body

​ parentNode，返回最近一级的父亲，不管父亲有没有定位

​ element.offsetTop,返回元素相对带有定位父元素上方的偏移

​ element.offsetLeft,返回元素相对带有定位父元素左边框的偏移

​ element.offsetWidth,返回自身包括padding、边框、内容区的宽度，返回数值不带单位

​ element.offsetHeight,返回自身包括padding、边框、内容区的高度，返回数值不带单位

​ (3)offset与style区别

​ offset:

​ 可以得到任意样式表中的样式值

​ offset系列获得的数值时没有单位的

​ offsetWidth包含padding+border+width

​ offsetWidth等属性时只读属性，只能获取不能赋值

​ 我们想要获取元素大小位置，同offset更合适

​ style:

​ style只能得到行内样式表中的样式值

​ style.Width获得的是带有单位的字符串

​ style.width获得不包含padding和border的值

​ style.width是可读写属性，可以获取也可以赋值

​ 我们想要给元素更改值，则需要用style改变

2.client系列，获取元素大小，元素可视区，clientWidth/height，与offset区别，不包含边框。

3.立即执行函数。不需要调用，立马能够立即自己执行的函数，闭包

(function () {})()  或者 (function () {}())

​ 第一个小括号可以看作声明函数，第二个小括号可以看作调用函数

​ 最大的作用就是独立创建了一个作用域，里面的变量都是局部变量，不会有变量名冲突问题

​ dpr物理像素比

4.scoll，获取滚动距离scoll scrollTop/scrollLeft,返回自身实际宽度，不含边框，返回数值不带单位

5.页面滚动距离通过window.pageXoffset获得

6.mouseenter和mouseover区别

​ mouseover 经过自身盒子，子盒子都会触发，会冒泡

​ mouseenter只有经过自身的时候触发，不会冒泡，mouseleave，同样不会冒泡

7.动画函数封装

​ (1).动画实现原理：通过定时器setInterval(),不断移动盒子位置当前位置+1，利用定时器不断重复这 个操作，即可实现动画

​ (2).动画函数的简单封装

function animate(obj,target) {
    var timer = setInterval(function () {
    if (obj.offsetLeft >= target){
         clearInterval(timer);
    }
	//当前位置+1，利用定时器不断重复这个操作，即可实现动画
    bj.style.left = obj.offsetLeft+1+'px';
	},30)
}
var div = document.querySelector('div');
animate(div,300)

​ 优化写法(给不同的元素指定了不同的定时器)，这样是给对象加了个属性而已，不会浪费内存

function animate(obj,target,callback) {
   //先清除以前的定时器，只保留当前的一个定时器执行
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
   var step = (target - obj.offsetLeft) / 10;
   step = step > 0? Math.ceil(step):Math.floor(step);
   if (obj.offsetLeft == target){
          clearInterval(obj.timer);
          callback && callback();
   }
   obj.style.left = obj.offsetLeft+step+'px';
},15)}

​ (3).缓动动画原理：让盒子每次移动距离慢慢变小，速度就会慢下来

​ 算法：(目标值-现在位置) / 10 做为每次移动的距离步长

五、网站TDK三大标签SEO优化

1.SEO搜索引擎优化，从而帮助网站获取更多流量，进而在搜索引擎上提升网站排名，提高网站的知名度。必须有三个标签才符合SEO优化

​ (1).title网站标题，不可替代，建议：网站名(产品名)-网站介绍(别超30字)

​ (2).description网站说明，简要说明网站是做什么的，‘我们是…’,‘我们提供…’

​ (3).keywords关键字，6-8个关键词

六、节流阀

作用：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

et,callback) {
//先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0? Math.ceil(step):Math.floor(step);
if (obj.offsetLeft == target){
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft+step+‘px’;
},15)}

​	(3).缓动动画原理：让盒子每次移动距离慢慢变小，速度就会慢下来

​		  算法：(目标值-现在位置) / 10 做为每次移动的距离步长

#### 五、网站TDK三大标签SEO优化

1.SEO搜索引擎优化，从而帮助网站获取更多流量，进而在搜索引擎上提升网站排名，提高网站的知名度。必须有三个标签才符合SEO优化

​	(1).title网站标题，不可替代，建议：网站名(产品名)-网站介绍(别超30字)

​	(2).description网站说明，简要说明网站是做什么的，‘我们是...’,'我们提供...'

​	(3).keywords关键字，6-8个关键词

#### 六、节流阀

作用：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数