ES5: 1、保护对象，保护对象的属性和方法 1、四大特性可以保护对象
对象的每个属性都有四大特性，三个开关。 默认是true
{
value:保存实际值的地方
wrltable:true//开关，控制属性是否可以被修改；
enumerable:true//开关，控制属性是否可以被for循环遍历
configurable:true//控制属性是否可以被删除，这个是个总开关，一旦设置为false就不可逆，不会在可以修改为其他属性
}
2、修改每个属性的四大特性：
object.defineproperties(obj{
"四大特性"：{四大特性}
})
2、三个级别：
1、方扩展：防添加
object.preventExtensions(obj);
2、密封，防添加防删除
object.seal(obj)
3、防添加防删除防修改；
object.freeze(obj);
个人推荐：1、如果使用面向过程开发就没有保护的必要。
2、前辈们也没有保护哦，所以也没有必要
*****数组的新API。三组六个 1、判断数组中的条件是否满足我们的条件；
1、every.判断数组中的条件是否【都】满足我们的条件，类似于&&，只要有一个false，则为false
2、some。判断数组中的元素是否【包含】我们的条件，类似于||，只要一个为TRUE。则为TRUE
语法：arr.every/some(function(val,i,arr){
//val:当前值
//i:当前值的下标
//arr:数组本身
//虽然提供了三个形参，但是要用几个看自己
//切忌：函数自带return undefined
return：判断条件
})
2、遍历：把数组中的每个元素取出来执行相同相似的操作
*****1、forEach:直接修改原数组
arr.forEach(function(var,i,arr){
return;直接写操作
})
*2、map；不修改原数组，直接返回新数组
var newArr=arr.map(function (val,i,arr){
return;直接写操作
})
3、汇总和过滤；
1、过滤：筛选出符合条件的元素----不会修改原数组
var subArr=arr.fiter(function(val,iarr){
return判断条件
})
2、汇总：将所有的数组的元素进行+-*/
var sum=arr.filter(function(prer.val,i,arr){
return prev+val
})
以上六个API简化for循环
3、var子对象=Object.create(父对象{
"属性名"：{四大特性}，
......
})根据一个父对象创建一个子对象，并且继承已经设置完毕，提前保护对象
*****4、call|apply|bind:替换了函数中的this 1、call|apply:临时替换了函数中的this----借
差别：all：要求传入的实参必须要单独传入
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---买断
三件事
1、创建了一个函数，功能跟原函数一样、
2、将新函数的this永久绑定了你指向的对象、
3、将新函数中的部分参数提前绑定
用法：var新方法名=方法名.bind（永久绑定的对象，永久绑定的实参，...）；
不会立即执行，需要我们手动调用
建议：如果你的方法要经常使用的话就用bind
如果方法需要立刻执行，就用call|apply
4、严格模式；
开启严格模式：可以在任何作用域的顶部写"use strict"
用处：
1、禁止给未声明的变量赋值
2、将静默失败升级为错误
*****2、ES6：简化和改变语法 1、模板字符串：支持直接在字符串中书写变量
`我的名字叫${name}`
以后再也不用""和''了
2、块级作用域：
将var替换为let用于创建变量，优先使用let
作用；
1、let之前不允许出现未声明的同名变量
解决声明提前
2、添加了块级作用域
一个{}就是一个块
*3、绑定事件时，会记录着当前元素的下标
不需要自己自定义自定义下标
3、箭头函数 简化一切的回调函数
回调函数：匿名函数，没有自调，就是回调
公式：去掉function，()和{}之间添加=>，如果形参只有一个省略()，如果函数体只有一句话省略{}，如果函数体只有一句话并且是return，{}和return都省略
箭头函数中如果出现this->外部的对象
建议：我们在事件中暂时不要简化为箭头函数
4、for...of循环 - 垃圾
for(var v of arr){
v;//当前值
}
缺点：
1、不能直接修改原数组，只能返回新数组
2、不能遍历hash数组，不能遍历对象（其实可以需要多加一句话）
DOM
1、DOM概念：Document Object Model
提供了专门用于操作HTML文档的API
DHTML：动态的HTML，一切实现网页动态效果的技术的统称，并不是什么新技术、新概念，仅仅只是一个统称 HTML+CSS+JS(DOM)
本来是可以操作一切结构化文档（HTML/XML）的：3部分
1、核心DOM：万能！但是API比较繁琐：elem.setAttribute("属性名","属性值")
2、HTML DOM：只能操作HTML文档，API非常的简单：elem.属性名=值;
3、XML DOM：基本已经淘汰很多年了
建议：以后优先使用HTML DOM，HTML DOM实现不了，在用核心DOM补充
面试/笔试题：HTML/XHTML/DHTML/XML：
HTML：网页
XHTML：更严格的网页
DHTML：动态的网页
XML：数据格式
2、***DOM树：保存所有网页内容的树状结构：树根：document,不需要创建，由浏览器的js解释器自动创建，一个页面只有一个树根 DOM节点/对象/元素：一个标签、文本、属性、注释等等 每个DOM节点/对象/元素都有三大属性： 1、xx.nodeType：获取xx的节点类型、
document:9
元素标签:1
文本节点:3
属性节点:2
对于现在的开发者，没用
2、属性节点.nodeValue：获取属性节点的节点值
现在依然没用：我们现在用getAttribute("")能直接获取到属性的值
3、***xx.nodeName：获取属性节点的名称：
我直接找儿子的话，可能找到多种标签，但是我们希望对不同的标签执行不同的操作
特殊：获取出来的标签都是全大写
3、通过 节点之间关系 获取元素：
1、父：elem.parentNode;
2、子：elem.children; - 集合：只能找到儿子级
3、第一个儿子：elem.firstElementChild;
4、最后一个儿子：elem.lastElementChild;
5、前一个兄弟：elem.previousElementSibling;
6、后一个兄弟：elem.nextElementSibling;
4、*****递归：函数中，再一次调用函数自己，但迟早有一天要让他停下来 作用：专门用于【遍历层级不明确的树状结构】 如何实现：2步
1、创建函数，传入实参树根，形参接住，直接做第一层要做的操作
function f1(root){
直接做第一层要做的操作
//判断自己有没有下一级，如果有再次调用此方法，但传入的实参已经变成了你的下一级
}
2、调用函数
f1(实际的根元素)
算法：深度优先！优先遍历当前节点的子节点
子节点遍历完，才会跳到兄弟节点
递归：优点：直观，易用
缺点：效率较低，同时开启的函数很多，占用内存空间，不是任何时候都要使用 - 几乎不担心（【遍历层级不明确的树状结构】）
循环：优点：效率较高
缺点：难度极大！
5、遍历API：专门用于【遍历层级不明确的树状结构】 2步：
1、创建treewalker对象
var tw=document.createTreeWalker(root,NodeFilter.SHOW_ALL/SHOW_ELEMENT);
2、反复调用nextNode方法：
while((node=tw.nextNode())!=null){
node;//当前节点做什么操作
}
深度优先算法
注意：此方法必须跳过起点
6、纯循环遍历层级不明确的树状结构 - 别用
总结：以后不用遍历API（只能遍历页面元素），也不用纯循环（难度大），遇到层级不明确的时候，使用递归（不仅遍历元素，还能遍历数据
7、***查找元素：
1、按照HTML的特点去查找元素：4个
var elem=document.getElementById("id");
找到了是单个元素，没找到一定是null
var elem=document.getElementsByTagName/ClassName/Name("标签/class名/name值")
找到了是个集合，没找到一定是一个空集合[]
2、按照CSS选择器进行查找：2个
1、单个元素，没找到一定是null，如果有多个，也只会找到第一个
var elem=document.querySelector("任意css选择器")
2、多个元素：找到的是一个集合，没找到空集合
var elem=document.querySelectorAll("任意css选择器")
面试题：getXXX和querySelectXXX的区别？
1、返回结果不同：
getXXX - 返回是一个动态集合（每次DOM树修改，都会悄悄的再次查找）
querySelectXXX - 返回是一个静态集合 （每次DOM树修改，不会再次查找，只管第一次找到的结果）
2、动态集合，不支持forEach
静态集合，支持forEach
3、复杂查找时，尽量使用var elem=document.querySelectorAll("任意css选择器")
操作元素 1、*内容：
1、innerHTML：支持标签，并且没有兼容性问题
获取：elem.innerHTML;
设置：elem.innerHTML="新值";
2、textContent：不支持标签，并且有兼容性问题，老IE：innerText，只不过小三上位（老IE不支持textContent，主流浏览器都支持innerText）
获取：elem.innerText;
设置：elem.innerText="新值";
3、value：转为input、select准备的
获取：elem.value;
设置：elem.value="新值";
2、*属性： 获取属性值：
核心DOM：万能的，可以操作一切属性
elem.getAttribute("属性名");
HTML DOM：只能操作标准属性，并且class需要写出className
elem.属性名;
设置属性值：
核心DOM：万能的，可以操作一切属性
elem.setAttribute("属性名","值");
HTML DOM：只能操作标准属性，并且class需要写出className
elem.属性名="新值";
删除属性：
*核心DOM：elem.removeAttribute("属性名"); - 删干净整个属性节点
HTML DOM：elem.属性名=""; - 赋值为空，删不干净，属性值确实没了，但属性名还在，有的属性只需要属性名也具有效果（href、disabled、readonly）
判断属性：垃圾：只能判断有没有
核心DOM：elem.hasAttribute("属性名");
个人更推荐：if(a1.getAttribute("属性名")=="属性值"){
console.log("有并且是");
}
3、样式：
内联：优先级最高，只会操作某个元素，不会牵一发动全身
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
css属性名如果有横线，去掉横线写为小驼峰命名法
样式表：4步
//获取哪一个样式表
var sheet=document.styleSheets[1];
//获取所有的样式规则
var rules=sheet.cssRules;
//获取到了我想要操作的样式规则
var rule=rules[36];
//修改或获取样式
console.log(rule.style.background);
rule.style.background="purple";
一切的获取都是为了判断比较 一切的设置都是在做修改操作
1、创建元素&渲染页面&删除元素： 1、创建元素：3步
1、var 空标签=document.createElement("标签名");
2、设置必要的属性或事件
空标签.属性名="值"
空标签.on事件名=function(){
操作
}
3、渲染页面元素：3种
*父元素.appendChild(新元素);//新元素会插入到父元素里面的末尾
父元素.insertBefore(新元素,已有子元素);//新元素会插入到父元素里面的已有子元素之前 - 不推荐：修改其他的人下标
父元素.replaceChild(新元素,已有子元素);//新元素会替换掉父元素里面的已有子元素
4、删除元素：
元素.remove();
核心DOM学习完毕：主要就是 - 增 删 改 查：元素、内容、属性、样式
2、HTML DOM提供了一些常用对象：简化了核心DOM的操作：但是不是人人都能简化
1、image：简化了创建
var img=new Image();
强调：在DOM中，不是人人都具有构造函数创建方式，只有我讲到的人才有
2、form：简化了查找
查找form元素：var form=document.forms[i];
查找表单控件：var input=form.elements[i];
专属事件：onsubmit事件 -> 提交的一瞬间会执行，也可以阻止提交return false;
3、*select：
属性：2个
1、options === children：获取到select下面的所有的option
2、*selectedIndex - 获取到当前选中项的下标，只要是做联动，必不可少
方法：
1、*select.add(option) - 完全等效于appendChild，追加元素
2、select.remove(i); - 删除select中的第i个option
专属事件：onchange-> 选中项发生改变时触发
4、*option：简化了创建
var opt=new Option("innerHTML","value");
新学的：
1、str.trim();//去掉字符串的开头结尾的空白字符
2、var bool=confirm("提示文字");//用户确认框
用户点击确定->true
用户点击取消->false
1、BOM：Browser Object Model 浏览器 对象 模型 提供了专门用于操作浏览器的API - 没有标准，使用的较少，但大部分浏览器厂商已经统一实现了（老IE）
2、BOM对象：*window（定时器）、history、*location、navigator、*****event、screen...
3、window对象：扮演了2个角色：
1、浏览器中，window代替了ES的Global充当全局作用域
包含了所有的全局对象、变量、函数
2、指代当前浏览器的窗口
1、*网页打开新链接的方式 提升用户的体验感： 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标签可以做的事？
1、跳转
2、锚点
3、下载：<a href="xx.rar/zip/exe">文字</a>
4、打开图片、txt：<a href="xx.图片后缀/txt">文字</a>
5、直接书写js：<a href="javascript:js代码;">文字</a>
2、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(){
//最后才会执行
}
5、*****定时器：2种
1、周期性定时器：先等待，在执行一次，在等待，在执行一次...
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性定时器：先等待，在执行一次，结束
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
两种定时器底层相同，可以互换，你爱用哪个就用哪个
