ES5
保护对象：保护对象的属性和方法
1、对象的每一个属性都有4大特征：3个开关默认为true
value
writeable：true
enumerable：特乳
configurable：true
false就不会允许修改其他特性，它本身一旦改为false不可逆
2、修改对象的某个属性的四大特征
Object.defineProperties（obj，{“属性名”：{四大特征}，...}）
三个级别
1、防扩展（防添加）
Object.PrevenExtensions（obj）；
2、密封（防添加、删除元素）
Object.seal（obj）；
3、冻结（防添加、删除、修改）
Object.freeze（obj）
数组的新的API（3组6对）
1、判断（判断数组中的元素是否满足我们的条件）
every：判断数组中的元素是否【都】满足我们的条件吗，类似于&&，只要有
一个为false则为false
some：判断数组中的元素是否【包含】满足我们的条件，类似于我们的||，只
要有一个为true则为true
语法：arr.every/some（function（val，i，arr）val
i:当前下标 arr：数组本身 return 判断条件）
注 ：函数自带return undefined
2、遍历：把数组中的每个元素取出来执行相同或相似的操作
foerEach：直接修改原数组
arr.forEach（function（val，i，arr）{直接写操作}）
map：不修改元素组，直接返回新数组
var newarr=arr.map（function（val，i，arr）{return 操作}）
3、汇总和过滤
过滤筛选出符合条件的元素————不会修改元素组
var subarr=arr.filter（function（val，i，arr）{return 判断条件}）
汇总：将所有的数组的元素进行+-*/
var sum=arr.reduce（function（pre，val，i，arr）{
return prev+val；}，base）
根据对象创建一个子对象并且继承已经设置完毕，提前保护对象
var 子对象=Object.create（父对象，{“属性名”：{四大特征}，...}）
call/apply/bind：替换了函数总的this
1、apply：临时替换了函数中的this，相当于借
区别
call：要求传入的实参必须单独传入
apply：要求传入的实参必须是整理为一个数组，只能传入一个数组参数
注意：call/apply相当于立刻调用函数
语法：
方法名.call（借用来的对象，实参...）
方法名.apply（借用的对象，[实参，...]）——apply会自动打散数组
固定套路：
Object.Prototype.toString.call/apply（数组）
Math.max/min.apply（Math，arr）
**将类数组转为普通数组**
lis=Array.prototype.slice.call（lis）
2、bind：永久替换了函数中的this————相当于买
a：创建了一个函数功能和原函数完全一样
b：将新函数的this永久绑定为了你指向的对象
c：将信函书中的部分固定参数提前永久绑定
语法：
var新方法名=方法名.bind（永久绑定的对象，永久绑定的实参，...）；
不会立刻执行，需要调用
注：如果这个方法要经常反复使用，可以使用bind
如果这个方法需要立刻执行，建议用call/apply
严格模式
严格模式：“use strict”；————可以出现在任何作用域的顶部
用处
a：禁止用未声明的变量进行赋值
b：将静默失败升级为错误
ES6
模板字符串：支持直接在字符串中书写变量
·我的名字叫${name}·，不用“”和''
块级作用域
将var 替换为let用于创建变量：优化使用let
作用
a：let之前不允许出现未声明的同名变量
解决声明提前
b：添加了块级作用域
一个{}就是一个作用域
c：绑定事件时，会记录着当前元素的下标，不需要自己定义自定义下标
箭头函数
公式：去掉function，在*（）和{}之间添加=>，如果形参只有一个省略（），如果
函数体只有一句话省略return，{}和return都省略
箭头函数如果出this，指的是外部的对象
注：在事件中暂时不要简化为箭头函数
for..of循环
for（var v of arr）{v
缺点
1、不能直接修改元素组，只能返回新数组
2、不能遍历hash数组，不能遍历对象
DOM
DOM概念
Document Object Model,提供了专门用于操作的HTML文档的API
DHTML：动态的HTML，一切实现网页动态效果的奇数的统称，并不是什么新技术、
新概念，仅仅只是一个统称。HTML+JS（DOM）+CSS
HTML/xHTML/DHTML/XML的区别
HTML：网页 xHTML：更严格的网页
DHTML：动态的网页 AML：数据格式
**BOM**
Browser Object Model:提供了专门用于操作的浏览器的API
没有标准，但是大部分浏览器厂商已经统一实现了，除了老IE，具有大量的
兼容性问题，使用的较少（定时器，event事件）
**DOM**
本来可以操作一切结构化文档（HTML/xML）的（分为3部分）
a、核心DOM：万能的，但是API比较繁琐
elem.setAttribute（“属性名”，“属性值”）
b、HTML DOM：只能操作HTML文档，API非常简单
elem.属性名=值
c、xML DOM（已经淘汰）
在实际操作中，我们优先使用HTMLDOM,HTML DOM实现不了的，再用核心
DOM补充
**DOM树**
保存所有网页内容的树状结构、树根：document不需要创建
DOM节点/对象/元素：指一个标签、文本、属性、注释等
**每个DOM节点/对象/元素都有三大属性**
1、xx.nodeType：获取xx的节点类型
document：9 元素标签：1 文本节点：3 属性节点：2
2、nodeValue：获取属性节点的节点值
现在使用getAttribute（“”）
3、xx。nodeName：获取属性节点的名称
特殊：获取出来的标签都是全大写
递归（函数中再次调用函数自己）
作用：专门利用遍历层级不明确的树状结构
操作：
1、创建函数传入实参树根，形参接住，直接做第一层要做的操作
function f1（root）{直接做第一层要做的操作
经变成了下一级}
2、调用函数
f1（实际的根）
算法：深度优先！优先遍历当前节点的子节点
子节遍历完，才会调到兄弟节点
递归的优点：直观，易用
缺点：效率较低，同时开启的函数很多，占用空间内存
例：
function f1(root,parent){
let ul=document.createElement("ul")
root.forEach(val=>{
let li=document.createElement("li")
li.innerHTML=val.name
ul.appendChild(li)
if(val.children){
f1(val.children,li)
}
})
parent.appendChild(ul)
}
f1(json,bd)
遍历API（专门用于遍历层级不明确的树状结构）
1、创建treewalker对象
var tw=document.createTreewalker（root，
NodeFilter.SHOW_ELEMENT（常用这一个）/SHOW_ALL）
2、反复调用nextNode方法
while（（node=tw.nextNode（））！null（））{
node.当前节点做什么操作}
注：此方法必定跳过起点
总：遍历API只能遍历页面元素，而纯循环难度大，遇到层级不明确的，使用
递归（不仅能遍历元素，还能遍历数据）进行遍历
查找元素
1、按照HTML的特点去查找元素（4个方法）
var elem=document.getElementByld（“id名”）；
找到了是单个元素，没有找到一定是null
var elem=document。getElementsByTagName/className/Name
（标签/class名/name值）
找到了是个集合，没找到一定是一个空集合
2、按照css选择器进行查找
单个元素，没找到一定是null，如果有多个，也只会找到第一个
var elem=document.querySelector（“任意css选择器”）
多个元素：找到了是一个集合，没找到是空集合（推荐使用）
var elem=document.querySelectorAll（“任意css选择器”）
例：var table=document.querySelectorAll（#cnter>div）
**getxx和querySelectxxx的区别：**
a、返回的结果不同
getxxx返回是一个动态集合（每次DOM树修改，都会悄悄的再次查找）
querySelectxxx返回的是一个静态集合（每次DOM树修改，不会再次查
找，直观第一次找到的结果）
b、getxx返回动态，不支持forEach
静态集合支持forEach
c、复杂查找时，尽量使用
varelem=document.querySelecttorAll（“”）
操作元素
1、属性
获取属性值
核心DOM：万能的，可以操作一切属性
elem.getAttribute（“属性名”）
HTMLDOM：只能操作标准属性
elem.属性名
设置属性值
核心DOM：elem.setttribute（“属性名”，“值”）
HTMLDOM：elem.属性名="新值"
删除属性值
核心DOM：elem.removeAttribute（“属性名”）--删干净整个属性节点
HTML DOM：elem.属性名=“”--赋值为空，删不干净，属性值确实没有了，
但属性名还在，有的属性名也具有效果（href、disabled、readonly）
判断属性（只能判断有没有）
核心DOM elem.hasAttribute（“属性名”）
通过这种方法判断更好：
if（a.getAttribute（“属性名”）==“属性值”）{
console.log（“有并且是”）}
2、样式
内联：优先级最高，只会操作某个元素，不会牵一发动全身
获取：elem.style.css属性名
设置：elem.style.css属性名=“css属性值”
css属性名如果有横线，去掉横线变成小驼峰命名法
**样式表**
①获取哪一个样式表
var sheet=document.styleSheet[i]
②获取所有的样式规则
var rules=sheet.caaRules；
③获取到想要操作的样式规则
var rule= rules[i]
④修改或获取样式
rule.style. background
创建元素/渲染页面/删除元素
1、创建元素
① var 空标签=document.createElement（“标签名”）
②设置必要的属性或事件
空标签.属性名=“值”
空标签.on事件名=function（）{操作}
2、渲染页面元素
①父元素.appendChild（新元素）；新元素会插入在父元素的末尾
②父元素.innerBefore（新元素，已有子元素）；新元素会插入到父元素
里面的已有子元素之前（会修改其他元素的下标，不推荐）
③父元素.replaceChild（新元素，已有子元素）；新元素会替换掉父元素里面
的已有子元素
3、删除元素
元素.remove
4、HTMLDOM提供的常用对象（不是人人都有简化方法）
①image：创建了简化
var img=new Image（）；
②form：简化了查找方法
查找元素form元素：var form=document.forms[i]
查找表单控件： var input=form.elements[i]
专属事件： onsubmit事件
提交的一瞬间会执行，也可以阻止提交return false
③**select
optios--相当于children，获取到select下面的所有的option
selectedindex--获取到当前选中项的下标，只要是做联动必不可少
方法：
select.add（new Option） 追加元素
select.remove（i）；删除select中的第i个option
专属事件：onchange------选中项发生改变时触发
④option：简化了创建
var opt=new Option（“innerHTML”，“value”
DOM对象
window、history、location、navigator、event、screen
window对象
扮演了两个对象：
①浏览器中，window替代了ES的Gloabl，充当全局作用域
包含了所有的全局对象、变量、函数
②指代当前浏览器的窗口
网页打开新链接的方式
1、替换当前页面，可以后退
HTML中：<a href="url">文字</a>
JS中：open("url","_self")
2、替换当前页面，禁止后退（使用场景：电商网页结账完毕后不允许后退）
history对象，保存了当前窗口的历史记录，功能：前进后退
location“保存了当前窗口正在打开的url
location.replace（“新url”）
3、在新窗口打开，可以打开多个
HTML：<a href="url" target="_blank>文字</a>
JS中：open（“url”，“_blank”）
4、在新窗口打开，只能打开一个（例：跳转到支付页面，只能打开一个）
HTML中：<a href="url" target="自定义">文字</a>
JS中：open（“url”，"自定义”）
自定义：窗口的底层都有一个名字，如果出现重复的名字则新窗口会替换掉原
来的旧窗口
**拓展：a标签可以做的事**
①跳转②锚点③下载：<a href="xx.rar/zip/exe">文字</a>
④打开图片、TXT：<a href="xx.图片的后缀/txt">文字</a>
⑤直接书写JS：<a href="javascript:js代码">文字</a>
window对象：属性和方法
属性：
获取浏览器窗口的大小
文档显示区域的、大小（body部分）
innerWidth/innerHeight
完整的浏览器大小
outerWidth/outerHeight
屏幕的大小（桌面应用才用）
screen.width/height
方法：
1、打开新窗口：
var newW =open（“url”，“自定义name”，“width=，height=，left=，top=”）
注：如果没有传入第三个参数，新窗口会和浏览器并为一体
如果传入第三个参数，新窗口会脱离浏览器（建议宽高不小于200）
2、关闭窗口
新窗口.close（）；
3、修改窗口的大小
新窗口.resizeTo(newW,newH);
4、修改窗口的位置
新窗口.moveTo（x，y）
获取鼠标的坐标
1、事件中传入一个形参e————获取到事件对象event（也可以获得鼠标的坐标）
2、获取
e.screenX/Y;
e.clientX/Y;
e.pageX/Y；
鼠标跟随效果
1、绑定事件 window.onmousemove
2、图片位置一定和鼠标位置一起
3、图片的加载速度比js的执行熟速度慢
img.onload=function(){//执行的操作}
例：
window.onmousemove=function(e){
let x=e.pageX,y=e.pageY
let img=new Image()
img.src="../img/2.png"
img.style.left=x+"px"
img.style.top=y+"px"
img.onload=function(){
img.style.transform="rotatex(360deg)"
img.style.opacity="0"
}
bd.appendChild(img)
}
setInterval(()=>{
var imgs=document.querySelectorAll("img")
for(var i=0
imgs[i].remove()
}
},1000)
定时器（2种）
1、周期性定时器：先等待，再执行，再等待，再执行.....
开启：timer=setInterval（callback，间隔毫秒数）
停止：clearInterval）timer；
2、周期性定时器：先等待，在开启一次，结束
开启：timer=setTimeout（callback，间隔毫秒数）
停止：clearTimeout（timer）
两种定时器底层相同，可以互换
