一、Web API基本认知
1.1作用和分类
作用：使用JS去操作html和浏览器
web：网页
apis:好多个 能够实现某个功能的函数
主要的任务是学习如何使用api方法操作网页(元素)
元素本身：
获取元素
创建元素
增加元素
删除元素
元素内容:
获取内容
修改内容 -- 删除内容-设置内容
元素属性:
修改属性
获取属性
添加属性
删除属性
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
1.2 DOM（Document Ojbect Model）文档对象模型
用来呈现以及与任意HTML 或XML文档交互的API
是浏览器提供的一套专门用来操作网页内容的功能
作用：开发网页内容特效和实现用户交互
1.3 DOM树
将HTML文档以树状结构直观的表现出来
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
1.4 DOM对象
浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想：把网页内容当做对象来处理
document对象
是DOM里提供的一个对象
提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document里面
二、获取DOM对象
查找元素DOM元素就是旋转页面中标签元素
2.1根据CSS 选择器来获取DOM元素
2.1.1选择匹配的第一个元素
语法：
参数：
包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的第一个元素，一个HTMLElement（DOM）对象
如果没有匹配到，就返回null
2.1.2选择匹配的多个元素
语法：
参数：包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的NodeList 对象集合
获取到的是一个伪数组
但是没有pop（） push（）等数组方法
想要得到里面的每一个对象，则需要遍历（如for）的方法获得
注意：
哪怕只有一个元素，通过querySelectAll（）获取过来的也是一个伪数组，里面只有一个元素而已
2.2其他获取DOM元素方法
三、设置/修改DOM元素内容
DOM对象都是根据标签生成的，所以操作标签就是操作DOM对象
操作对象使用的点语法
3.1 document.write（）
只能将文本内容追加到前面的位置
文本中包含的标签会解析
3.2元素.innerText属性
语法：元素.innerText = ‘值’
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
3.3元素.innerHTML属性
语法：元素.innerHTML = ‘值’
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
四、设置/修改DOM元素属性
语法：
点语法只能操作内置属性，对自定义属性的操作忽略
4.1设置/修改元素样式属性
4.1.1通过style属性操作CSS
语法：
注意：
1. 修改样式通过style属性引出
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值时，有单位的注意要加CSS单位
4.1.2操作类名（className）操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，可以通过CSS类名的形式
语法：
注意：
1. 由于class是关键字，所以使用className去代替
2. ClassName是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
4.1.3通过classList操作类控制CSS
解决className容易覆盖以前的类名，通过classList方式追加和删除类名
语法：
classList.add：在之前的样式的基础上新增一个样式类名，“不影响”元素之前的样式
参数不用再添加.标记了，因为只对类名样式进行处理
classList.remove：移除指定名称的样式，不影响元素其他的样式类名
classList.toggle：切换元素的样式，没有就添加，有就移除
classList.contains：判断当前元素是否包含某个指定名称的样式，如果有就返回true，没有就返回false
4.2设置/修改表单元素属性
获取：DOM对象.属性名
设置：DOM对象.属性名=新值
五、定时器-间歇函数
定时器函数可以开启和关闭定时器
5.1开启定时器
作用：每隔一段时间调用这个函数
间隔时间单位是毫秒
5.2关闭定时器
不会刚创建就停止，而是满足一定条件再停止
六、事件
在编程时，系统内发生的动作或者发生的事情，比如在网页上单击一个按钮
事件监听：让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也叫注册事件
语法：
事件监听三要素：
事件源：哪个dom元素被事件触发了，要获取dom元素
时间：用什么方式触发，比如鼠标单机click、鼠标经过mouseover等
事件调用的函数：要做的事情
6.1事件类型
鼠标单击事件可以直接使用代码直接调用触发，其他事件不行
如：
已有单击事件：变量.addEventListener('click',function( ) { } )
后续如需直接调用，直接 变量.click（）
非点击事件如果需要调用，实现步骤：
Let ev = document.createEvent（‘HtmlEvents’）
Ev.initEvent（‘对应的非点击事件（如：mouseenter）’ true，true）
对应需要触发这个事件的元素（如：lis[index]）.dispatchEvent（ev）
七、高阶函数
JavaScript中函数可以被当做一个值来使用
值就是JavaScript中的数据
函数表达式和普通函数没有本质区别
7.1回调函数
将函数A作为参数传递给函数B时，函数A就是回调函数
7.2环境对象
是函数内部特殊的变量this，代表当前函数运行时所处的环境
作用：弄清this的指向
函数的调用方式不同，this指代的对象也不同
【谁调用，this就是谁】直接调用，相当于是widow
直接调用函数，其实相当于是window函数，所以this指代window
八、节点操作
8.1 DOM节点
DOM树里每一个内容都称为节点
节点类型
元素节点：所有标签（body、div），html是根节点
属性节点：所有的属性（href）
文本节点：所有的文本
其他
节点关系：
父节点
子节点
兄弟节点
8.2查找节点
父节点查找：
parentNode属性
返回最近一级的父节点，找不到返回为null
子节点查找：
childNodes
获取所有子节点、包括文本节点（空格、换行）、注销节点等
children
仅获取所有元素节点
返回的还是一个伪数组
兄弟关系节点查找：
1. 下一个兄弟节点
nextElementSibling属性
2. 上一个兄弟节点
previousElementSibling属性
8.3增加节点
创建一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点：
8.3.1追加节点
插入到父元素的最后一个子元素：
插入到父元素中某个子元素的前面：
8.3.2克隆节点
CloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
若为false，则代表克隆时不包含后代节点--浅拷贝
默认为false
8.4删除节点
若一个节点在页面中意不需要时，可以删除
在JavaScript原生DOM操作中，要删除元素必须通过父元素删除（要求元素是安全parent的直接子元素）
语法：
注：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点
九、时间对象
用来表示时间的对象
作用：可以得到当前系统时间
代码中如果有“new”关键字时，一般这个操作叫实例化
获得当前时间
语法：let 变量名称 = new Date（）
获得指定时间
9.1时间对象方法
因为时间对象返回的数据不能直接使用，所以需要转换为实际开发中常用的格式
8.2时间戳
指XXXX年XX月XX日XX时XX分XX秒起至现在的毫秒数，是一种特殊的计量时间的方式
获取时间戳方式
1. 使用getTime（）方法
2. 简写 +new Date（）
3. 使用Date.now()
无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
9.3重绘和回流
浏览器渲染流程
解析（parser）HTML,生成DOM树（DOM tree）
同时解析（parser）CSS，生成样式规则（style rules）
根据DOM树和样式规则，生成渲染树（render tree）
进行布局layout（回流/重排）：根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制painting（重绘）：根据计算和获取的信息进行整个页面的绘制
Display：展示在页面上
回流（重排）
当render tree 中部分或全部元素的尺寸，结构，布局等发生变化时，浏览器就会重新渲染部分或者全部文档的过程
重绘
节点（元素）样式的改变并不影响在文档流中的位置和文档布局时（例：color，background-color）
重绘不一定引起回流，回流一定会重绘
会导致回流的操作：
页面的首次刷新
浏览器的窗口大小发生变化
元素的大小或位置发生改变
改变字体的大小
内容的变化（如：input输入框，图片的大小）
激活css伪类（如：hover）
脚本操作DOM（添加或者删除可见DOM元素）
影响到布局就会回流
十、事件对象
这个对象里有事件触发时的相关信息
在事件绑定的回调函数中的第一个参数就是事件对象
一般命名为event、ev、e
10.1获取事件对象
常用属性
type：获取当前事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值（一般现在都不用keyCode）
10.2事件流
是事件完整执行过程中的流动路径
当触发事件时，会经历2个阶段，分别是捕获阶段、冒泡阶段
捕获阶段是从父到子，冒泡阶段是从子到父
10.3事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发
当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
10.4事件捕获
从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
代码：
addEventListener第三个参数传入true代表是捕获阶段触发
若传入false代表冒泡阶段触发，默认值是false
若是用L0事件监听，则只有冒泡阶段，没有捕获
10.5阻止事件流动
因为默认有冒泡模式，所以容易导致事件影响到父级元素
想把事件限制在当前元素内，就需要阻止事件流动
语法：
可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
10.5.1鼠标经过事件：
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐使用）
10.5.2阻止默认行为
如a链接不跳转，表单域的按钮点击不提交
语法：
10.5.3两种注册事件的区别
传统on注册（L0）
同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段执行
事件监听注册（L2）
语法：addEcentListener（事件类型，事件处理函数，是否使用捕获）
后面注册的事件不会覆盖前面注册的事件（同一个事件）
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener（事件类型，事件处理函数，获取捕获冒泡阶段）
匿名函数无法被解绑
10.6事件委托
利用事件流的特征解决开发需求的技巧
优点：给父级元素加事件（提高性能）
原理：事件委托是利用事件冒泡的特点，给父元素添加事件，子元素也可以触发
实现：事件对象.target可以获得真正触发事件的元素
十一、滚动事件和加载事件
11.1滚动事件
当页面进行滚动时触发的事件
很多网页需要检测用户把网页滚动到某个区域后做一些处理，如：固定顶部栏，返回顶部
事件名：scroll
监听这个页面滚动：
给window或document添加scroll事件
监听某个元素内部滚动直接给某个元素加即可
11.2加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
事件名：load
监听页面所有资源加载完毕：
给window添加load事件
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：
给document添加DOMContentLoaded事件
十二、元素大小和位置
12.1 scroll家族
获取宽高：
获取元素内容的总宽高（不包含滚动条）返回值不带单位
ScrollWidth和scrollHeight
获取位置：
获取元素内容往左、往上滚出去看不到的距离
scrollLeft和scrollTop
这2个属性是可以修改的
12.2 offset家族
获取宽高：
获取元素自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取位置：
获取元素距离定位父级元素的左、上距离
offsetLeft和offsetTop 是只读取属性
12.3 client家族
获取宽高：
获取元素的可见部分宽高（不包含边框，滚动条等）
clientWidth和clientHeight
获取位置：
获取左边框和上边框宽度
clientLeft和clientTop 只读取属性
通用取属性：window.getCompoutedStyle（元素，null）获取元素的所有样式
在窗口尺寸改变的时候触发事件：
resize
检测屏幕宽度：
十三、Window对象
13.1定时器--延时函数
JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout
语法：
SetTimeout仅仅值执行一次，就是 把一段代码延迟执行，平时省略window
清除延时函数：
通过clearTimeout也可以清除setInterval开启的定时器，反过来也一样
结合递归函数可以使用setTimeout实现setInterval一样的功能
clearTimeout清除由setTimeout创建的定时任务
创建的定时器应该由clearInterval来清除
创建的延迟器应该由clearTimeout来清除
13.2经典面试题
132
132
13.3 JS执行机制
JS是单线程
JavaScript语言的特点是单线程，一个时间只能做一件事
13.3.1同步和异步
为了解决单线程的问题，利用多核CPU的计算能力，HTML5允许JavaScript脚本创建多个线程
同步：前一个任务结束后再执行后一个任务，程序的执行顺序跟任务的排序是一致的、同步的。
异步：在做一个任务时，因为这个事情会花费很长时间，所以同时会去处理其他事情
区别：各个流程的执行顺序不同
同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务：JS的异步是通过回调函数实现的
异步任务的三种类型：
1、普通事件，如：click、resize
2、资源加载，如：load、error
3、定时器，包括setInterval、setTimeout
异步任务相关添加到任务队列（消息队列）中
13.3.2 JS执行机制
1.先执行 执行栈中的同步任务
2.异步任务放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断的重复获得任务，执行任务，再获得任务，再执行，所以称为事件循环（event loop）
13.4 location对象
数据类型是对象，拆分并保存了URL地址的各个组成部分
常用属性和方法：
href属性获取完整的URL地址，对其赋值时用于地址的跳转
search属性获取地址中携带的参数，符号？后面部分
hash属性获取地址中的啥希值，符号#后面部分
reload方法用来刷新当前页面，传入参数true时表示强制刷新
13.5 navigator对象
数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
通过userAgent检测浏览器的版本及平台
13.6 histroy对象
数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：
history对象一般在实际开发中比较少用，但是在OA办公系统中
十四、swiper插件
14.1插件
别人写好的代码，复制对应代码可以直接实现对应效果
在线演示： www.swiper.com.cn/demo/index.…
基本使用流程： www.swiper.com.cn/usage/index…
APi文档： www.swiper.com.cn/api/index.h…
注意: 多个swiper同时使用的时候, 类名需要注意区分
十五、本地存储
特性：
1. 数据存储在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sesionStorage和localStorage约5M左右
15.1 localStorage
1.生命周期永久生效，除非手动删除，否则关闭页面也存在
2.可以多窗口（页面）共享（同一浏览器可以共享）
3.以键值对的形式存储使用
存储数据:localStorage.setItem（key,value）
获取数据：localStorage.getItem（key）
删除数据：localStorage.removeItem（key）
清空所有本地存储：localStorage.clear（）
15.1.1存储复杂数据类型存储
本地智能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串，再存储在本地
JSON.stringify（复杂数据类型）
将复杂数据转换成JSON字符串 存储 本地存储中
JSON.parse（JSON字符串）
将JSON字符串转换成对象 取出 时候使用
15.2 sessionStorage
1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对形式存储使用
4.用户和localStorage基本相同
十六、自定义属性
固有属性：
标签天生自带的属性，比如class、id、title等，可以直接使用点语法操作
自定义属性：
人为自行添加的属性，在DOM对象中找不到，无法使用点语法操作，必须使用专门的API
获取自定义属性：getAttribute（‘属性名’）
设置自定义属性：setAttribute（‘属性名’，’属性值’）
删除自定义属性：removeAttribute（‘属性名’）
Data-自定义属性：
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获
十七、正则表达式
主要作用是校验用户的输入（字符串）是否合法，可以进行字符串的提取和替换
基本语法：
1. 定义正则表达式语法：
其中/ /是正则表达式字面量
2. 判断是否有符合规则的字符串：
Test（）方法 用来查看正则表达式与指定的字符串是否匹配
语法：
如果正则表达式于指定的字符串匹配，返回true，否则false
占位符：
\d：代表一个数字，0-9
\w：代表一个合法字符，在JS合法字符有：A-Z a-z 0-9 _
[ ]：代表一个指定的范围中的一个字符，范围可以是具体的值范围，也可以是链接的范围，使用-连接，还可以实现转义，写在[ ]里面的会当成浦头的字符串来处理
\W：代表一个非法字符：除了合法都是非法
.：代表一个任意字符：只要有字符就可以，但是不能空字符 ’ ’ “ ”
\D：代表一个非数字
\s：代表一个空字符，空格、换行、制表位
\S：代表一个非空字符
修饰符：
起修饰作用，用来修饰前面的字符所出现的次数，修饰符不能单独存在（先占位，后修饰）
*：修饰前面的字符出现任意次
？：修饰前面的字符出现0次出1次
+：修饰前面出现的字符出现1次或多次
{n}：修饰前面的字符出现n次
{n，m}：修饰前面的字符最少出现n次，最多出现m次
{n，}：修饰前面的字符最少出现n次或更多次
其他元字符：
^：以....开始
$：以...结束
\：转义：将字符当成普通字符来处理
()：改变优先级
中文验证：/^[\u4e00-\u9fa5]{2,8}$/
正则常用方法：
test：实现验证，侧重是校验匹配。返回true和false
exec：实现校验，侧重是校验之后的字符串提取
replace：替换
替换一个
str = str.replace( ‘ ‘ , ‘ ‘ )
替换所有满足条件的字符
str = replaceAll( ‘ ‘ , ‘ ‘ )
g:全局匹配，正则从头匹配到最后
