一、ES5
- 保护对象：保护对象的成员（属性和方法）
- 1.四大特征
Object.defineProperties(obj,{
"属性名":{
value:实际保存值,
writable: true/false,//开关：控制着这个属性名是否可以被修改
enumerable: true/false,//开关：控制着这个属性名是否可以被for in循环遍历到
configurable: true/false,//开关：控制着这个属性名是否可以被删除 - 这一句是总开关，一旦设置为false，其他特性不允许在修改，一旦设置为false不可逆
}
})
- 2.三个级别： 1.防扩展：禁止给对象添加新属性
Object.preventExtensions(obj);
2.密封：禁止给对象添加新属性和删除属性
Object.seal(obj);
3.冻结：禁止给对象添加、删除和修改
Object.freeze(obj);
2.数组的新API
- 1.判断：结果为布尔值
（1）every：每一个，要求每一个元素都要满足，结果才为true，只要有一个不满足就为false
var bool=arr.every(function(val,i,arr){
return 判断条件;
})
//val - 当前值
//i - 当前下标
//arr - 数组本身，前辈们确实提供了3个形参给我们，但我们需要哪个在用哪个
（2）some：要求每一个元素都不满足，结果才为false，只要有一个满足就为true
var bool=arr.some(function(val,i,arr){
return 判断条件;
})
- 2.遍历：将数组中的每个元素拿出来做相同或相似的操作 （1）直接修改原数组
arr.forEach(function(val,i,arr){
直接做操作
})
（2）不修改原数组，返回一个新数组
var newArr=arr.map(function(val,i,arr){
return 操作的结果
})
- 3.过滤和汇总 （1）过滤：筛选出自己想要的，不会修改原数组
var subArr=arr.filter(function(val,i,arr){
return 判断条件;
})
（2）汇总：把数组中的每一个元素汇总在一起
var sum=arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值);//基础值会和最后的结果加在一起
- 4.根据父对象创建子对象
var 子对象=Object.create(父对象,{
"自有属性名":{四大特性},
...
});
- 5.严格模式：禁止给未声明的变量赋值，静默失败升级为报错
use strict - 6.不是自己的方法也可以使用 （1）call/apply：临时替换了函数中的this
函数名.call(借用的对象,实参,...); - 单独传入每一个实参
函数名.apply(借用的对象,arr); - 只能传入一个实参是一个数组，apply其实会悄悄的将数组打散
（2）bind：永久替换了函数中的this
var 新函数=原函数.bind(指定对象,永久实参,...) - 不是立刻执行的，需要自己调用
二、ES6 1.模板字符串：可以在字符串放入变量，不需要再做字符串拼接，在字符串中实现一个简单js环境
我的名字叫${name}
2.块级作用域：用let创建变量
let 变量名=值;
作用：
1.禁止声明提前 2.添加了块级作用域，一个｛｝就是一个块 3.记录着当前触发事件的元素的下标
3.箭头函数：简化回调函数
使用：去掉function，（）和｛｝之间添加=>，形参如果只有一个，省略掉（），函数体如果只有一句话，省略｛｝，函数体只有一句话并且是return，return和｛｝都可以省略
4.for..of循环
for(var v of 数组名){
v;//value当前值
}
缺点：1.不能修改原数组，只能返回新数组 2.不能遍历hash数组，意味着不能遍历对象，只能遍历索引数组
三、DOM
1.核心DOM：既可以操作HTML，又可以操作XML
2.HTML DOM：只能操作HTML，API简单
3.DOM元素三大属性：
（1）XX.nodeType:描述节点的类型
document节点：9
element节点：1
attribute：2
text节点：3
（2）xx.nodeValue:属性节点的值，获取属性值
（3）xx.nodeName：节点的名称-判断XX是什么标签
四、递归
1.何时使用：遍历DOM树，专门用于遍历层级不明确的情况，既可以遍历层级不明确的dom，也可以遍历层级不明确的数据
function 函数名(root){
1、第一层你要做什么操作直接做
2、判断他有没有下一级，如果由下一级再次调用此函数，只不过传入的实参是他的下一次
}
2.算法：深度优先，优先遍历当前节点的子节点，子节点遍历完毕才会调到兄弟节点
3.缺点：同时开启大量的函数调用，浪费内存，只有遍历层级不明确的情况采用
4.遍历层级不明确的API：TreeWalker
1.创建
var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT);
2.反复调用nextNode方法找到每一个元素
while((node=tw.nextNode())!=null){
node要做什么操作;
}
五.API直接查找元素
1.通过HTML的一些特点去查找元素
1、id：var elem=document.getElementById("id"); - 找到了是单个元素，没找到null
2、tagname/class/name：var elems=document.getElementsByTagName/ClassName/Name("标签名/class名"); - 找到了是集合，没找到空集合
2.通过css选择器去获取元素
1、单个元素：var elem=document.querySelector("任意css选择器");
强调：万一选择器匹配到多个，只会返回第一个
没找到null
2、多个元素：var elems=document.querySelectorAll("任意css选择器");
强调：找到了返回集合，没找到返回空集合
更适合做复杂查找
get和querSelector的区别：1、getXXX，获取到返回的是一个动态集合HTMLCollection 2.querySelectoXXX，获取到返回的是一个静态集合NodeList
动态集合和静态集合的区别：
1.动态集合：根据DOM树的改变，是动态集合也一起改变，每一次修改DOM树，都会悄悄的再次查找DOM 缺点：每次都会悄悄重新查找，效率较低，不能使用forEach
2.静态集合：每一次修改DOM树，静态集合不会发生变化，只会认准你找的时候的第一次找到的结果 优点：每次不会悄悄重新查找，效率较高，可以使用forEach
六、操作元素
1.元素的内容
1、elem.innerHTML：获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题，可以识别标签
获取：elem.innerHTML
设置：elem.innerHTML="新内容"
2、elem.textContent：获取或设置开始标签到结束标签之间的纯文本，具有兼容性问题，不能识别标签
获取：elem.textContent
设置：elem.textContent="新内容"
3、input.value：获取或设置单标签（能写内容的单标签）的内容的
获取：input.value;
设置：input.value="新内容"
2.元素的属性
1、获取属性值：
核心DOM：elem.getAttribute("属性名");
HTML DOM：elem.属性名;
2、设置属性值
核心DOM：elem.setAttribute("属性名","属性值");
HTML DOM：elem.属性名="属性值";
3、删除属性：
核心DOM：elem.removeAttribute("属性名");
HTML DOM：elem.属性名="";
4、判断属性：垃圾，只能判断有没有，不能判断具体是什么
核心DOM：elem.hasAttribute("属性名");
真的想要判断，更推荐：
if(elem.getAttribute("class")=="d1"){
使用获取的方式能判断出具体是什么class
}
3.元素的样式
1、内联样式：优先级最高，一定会覆盖其他的样式
仅仅当前元素可用，不会牵一发动全身
获取样式：elem.style.css属性名
设置样式：elem.style.css属性名="css属性值"
唯一的缺点：获取样式时，也只能获取内联样式
2、样式表：
1、获取你想要操作的样式表
var sheet=document.styleSheets[1];
2、获取这个样式表中所有的样式规则
var rules=sheet.cssRules;
3、数出你想要操作的那个样式规则
var rule=rules[30];
4、操作：获取和设置
console.log(rule.style.background);
rule.style.background="purple"
七、创建元素和渲染DOM数据
（1）创建空标签
var elem=document.createElement("标签名");
（2）为这个空标签添加必要的属性或事件
elem.属性名="属性值";
elem.on事件名=function(){}
（3）将内存中创建的元素渲染到DOM树上
父元素.appendChild(elem);//将elem追加到父元素里面当了最后一个儿子
父元素.insertBefore(elem,已有子元素);//将elem追加到父元素里面当了儿子，会插在已有子元素的前面 - 导致所有元素的下标都会改变
父元素.replaceChild(elem,已有子元素);//将elem追加到父元素里面当了儿子，会替换掉已有子元素
删除元素
elem.remove()
八、HTML DOM常用对象
1.image对象
var img=new Image();
2.form对象
查找form元素：var form=document.forms
查找form元素中的表单控件：var input=form.elements
专属事件：form.onsubmit=function(){//提交事件，只会在提交的一瞬间触发：防止用户输入错误也能提交
return false;//阻止条件
}
3.select对象
属性：
1、select.options;
2、select.selectedIndex;//获取到当前选中项的下标 - 只要是做联动就必然会用到
方法：
1、select.add(option);
2、select.remove(i);
专属事件：
select.onchange=function(){//只有选中项发生变化的时候才会触发}
select.add(new Option("内容","值"))
4.option对象
创建：var opt=new Option("innerHTML","value");
九、浏览器提供了3个弹出框
1.用户输入框
var user=prompt("提示文字","默认值");
2.警告框
alert("警告文字");
3.用户确认框
var bool=confirm("提示文字");
十、BOM
1.window对象：1、代替了ES中的global，充当全局对象 2、自己也带有一些属性和方法，指代当前窗口本身
2.window对象提供的东西：
（1）网页打开新链接的方式
- 1.替换当前页面，可以退后
HTML：<a href="url">内容</a>
JS：open("url","_self");
- 2.替换当前页面，禁止后退
JS：location.replace("新url");
- 3.在新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
- 4.在新窗口打开，只能打开一个：只允许打开一个
HTML：<a href="url" target="自定义name">内容</a>
JS：open("url","自定义");
- a标签的作用：1.跳转2.锚点3.下载
<a href="xx.安装后缀/压缩包后缀">内容</a>4.打开<a href="xx.txt/图片后缀">内容</a>5.直接书写js
4.window提供的属性和方法
- 属性： 获取浏览器的完整大小
outerWidth/Height;
获取浏览器的文档显示区域大小
innerWidth/Height;
获取浏览器的屏幕的完整大小
screen.width/height;
- 方法
1.打开窗口
var newW=open("url","target/自定义","width=,height=,left=,top=");
2.关闭窗口
window/newW.close();
3.修改窗口的大小
newW.resizeTo(newW,newH);
4.修改窗口的位置
newW.moveTo(x,y);
获取鼠标的位置
1.在事件函数中的小括号里传入一个形参e，自动获取到事件对象event
2.获取坐标：
e.screenX/Y - 鼠标相对于屏幕的坐标：鼠标就算在最上面也是70px左右
e.clientX/Y - 鼠标相对于文档显示区域的坐标：网页不管多长多大，始终顶部是0，底部是900多
e.pageX/Y - 鼠标相对于整个页面的坐标 - 跟随我们的网页变化
完成鼠标跟随动画：
window/document.onmousemove
onload
定时器
1.周期性定时器
开启：timer=setInterval(callback,间隔毫秒数)
停止：clearInterval(timer);
2.一次性定时器
开启：timer=setTimeout(callback,等待毫秒数)
停止：clearTimeout(timer);
