1、ES5:
1、保护对象：保护对象的成员（属性和方法）
如何保护：
1、四大特性：
{
"value": 1001,//实际保存值的
"writable": true,//开关：控制着这个属性是否可以被修改
"enumerable": true,//开关：控制着这个属性是否可以被for in循环遍历到
"configurable": true//开关：控制着这个属性是否可以被删除
}
如何修改四大特性：
Object.defineProperties(obj,{
"属性名":{四大特性},
...
})
2、三个级别：
1、防扩展：禁止给对象添加新属性
Object.preventExtensions(obj);
2、密封：禁止给对象添加新属性和删除属性
Object.seal(obj);
3、冻结：禁止给对象添加新属性和删除属性和修改属性
Object.freeze(obj);
其实保护对象对于我们程序员并没有用处，为什么？
1、如果你用的是面向过程开发，你保护个屁
2、别人基本不可能知道我们的对象名叫什么
3、前辈们都没有保护，你保护个啥
2、*****数组的新的API：3组6个：
1、判断：2个
1、every - 每一个 - 要求每一个元素都要满足，结果才为true，只要有一个不满足就为false - 类似于&&
语法：
var bool=arr.every(function(val,i,arr){//
console.log(val);//保存的是当前的值
console.log(i);//保存的是当前的值的下标
console.log(arr);//数组本身
return 条件;
})
2、some - 有一些 - 要求每一个元素都要不满足，结果才为false ，只要有一个不满足就为true - 类似于||
语法：
var bool=arr.some(function(val,i,arr){
return 条件;
})
2、遍历：将数组中的每个元素取出来执行相同 或 相似的操作
1、forEach：直接修改原数组
语法：
arr.forEach(function(val,i,arr){
直接做操作
})
2、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(prev,val,i,arr){
return prev+val;
},基础值)
以上6个API，底层都是for循环，对其进行了简化
3、Object.create(); - 根据父对象创建子对象，继承已经设置好了
var 子对象=Object.create(父对象,{
"属性名":{四大特性},
...
});
4、面试题：严格模式 - 很严格
开启：在你的任何作用域的顶部加上一句话："use strict"; 功能：1、禁止给未声明的变量赋值 - 解决了全局污染 2、将静默失败升级为报错
5、*****call/apply/bind：不是自己的方法也可以使用 - 笔试面试开发都很容易用到：
call/apply：临时替换了函数中的this - 借用
语法：函数名.call(借用的对象,实参,...); - 单独传入每一个实参
函数名.apply(借用的对象,arr); - 只能传入一个实参是一个数组，apply其实会悄悄的将数组打散为单个元素
强调：call/apply，相当于立刻调用函数，立刻执行
bind：永久替换了函数中的this - 买
3件事：
1、创建了一个和原函数功能完全相同的新函数
2、将新函数中的this永久替换为了指定对象，别人都借不走了
3、将新函数中的部分参数永久固定
用法：var 新函数=函数名.bind(指定对象,永久实参,...); - 不会立刻执行的，需要自己调用
强调：bind绑定的新函数没办法被call/apply借走
个人更推荐：call/apply - 白嫖
固定套路：3个
1、Math.max/min.apply(Math,arr);
2、Object.prototype.toString.call/apply(arr)==="[object Array]"
3、***类数组转为普通数组：lis=Array.prototype.slice.call(lis);
ES6：语法较大的变化
1、*模板字符串：可以在字符串中放入变量 - 不需要再做字符串拼接了，实现了一个简单的js环境
语法：`我的名字叫${name}`;
2、*let关键字：尽量以后优先使用let创建变量
let 变量名=值;
作用：
1、禁止声明提前
2、带来了块级作用域：{}就是一个块级作用域
3、记录着当前触发事件的元素的下标
3、***箭头函数：简化一切的回调函数
公式：去掉function，()和{}之间添加=>，如果形参只有一个，省略()，函数体如果只有一句话，省略{}，函数体只有一句话并且是return，return和{}都省略
4、for...of循环：垃圾
for(var v of arr){
v;//当前值
}
缺点：1、不能修改原数组，只能返回新数组
2、不能遍历hash数组，意味着不能遍历对象，只能遍历索引数组
1、DOM
1、什么是DOM：Document Object Model - 文档对象模型 将每一个标签/元素/属性/文本/注释，看作了是一个DOM节点/元素/对象（提供了一些属性和方法）
面试题：HTML/XHTML/DHTML/XML分别是什么？HTML - 网页
XHTML - 更严格的网页
DHTML - 动态的网页：D：Dynamic，其实并不是新技术、新概念。将现有技术整合的一个统称，是我们的网页在离线状态依然具有动态效果 DHTML=HTML+CSS+JS(DOM)
XML - 数据格式
DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3部分：
1、核心DOM：【无敌】，既可以操作HTML 又可以操作XML
缺点：API比较繁琐
2、HTML DOM：只能操作 HTML，API简单，缺点：比如属性部分，只能访问/设置标准属性，不能操作自定义属性
3、XML DOM：只能操作 XML，被淘汰了，现在市场上最流行的数据格式是：JSON
开发建议：优先使用HTML DOM，HTML DOM满足不了再用核心DOM进行补充
2、DOM树：树根：document对象 - 不需要我们创建，一个页面只有一个document对象，由浏览器的js解释器自动生成
可以通过数据跟找到每一个DOM节点/元素/对象，提供了很多API
3、每个DOM元素都有三大属性： 1、xx.nodeType：描述节点的类型 document节点：9 element节点：1 attribute节点：2 text节点：3
以前有用：判断xx是不是一个页面元素 - 因为以前我们找元素的方式和大家现在的不一样
2、xx.nodeValue：属性节点的值，说白了就是获取属性值 以前有用
3、***xx.nodeName：节点的名称 - 判断xx是什么标签 注意：返回的是一个全大写的标签名
今日唯一的目标：找元素
1、*通过 关系 获取元素：
父：elem.parentNode;
子：elem.children; - 集合：只能找到儿子，不能找到后代
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
2、*****递归：
简单来说就是函数中又一次调用了函数自己，迟早有一天会停下来
何时使用：专门用于遍历层级不明确的情况：既可以遍历层级不明确的DOM，也可以遍历层级不明确的数据
如何使用：2步
function 函数名(root){
1、第一层你要做什么操作直接做
2、判断它有没有下一级，如果有下一级再次调用此函数，只不过传入的实参是他的下一级
}
函数名(根节点)
算法：深度优先！优先遍历当前节点的子节点，子节点遍历完才会跳到兄弟节点
缺点：同时开启大量的函数调用，浪费的内存，只有一个情况才用：【遍历层级不明确】
递归 vs 纯循环
递归：优点：直观、易用
缺点：性能较低
纯循环：优点：性能高，几乎不占用内存
缺点：难度极大
3、遍历层级不明的API：TreeWalker - 一个在DOM树上行走的人
缺陷：1、自动跳过根节点 2、只能遍历层级不明确的DOM树
如何使用：
固定公式：
1、创建tw：
var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT);
2、反复调用nextNode方法找到每一个元素
while((node=tw.nextNode())!=null){
node要干什么;
}
4、*API直接查找元素：
1、通过HTML的一些特点找元素
TagName/ClassName/Name：var elems=document.getElementsByTagName/ClassName/Name("标签名/class名/name名");
建议：表单控件元素input可以不写class，因为必写name
2、通过css选择器去获取元素：
1、单个元素：var elem=document.querySelector("任意css选择器");
强调：万一选择器匹配到多个，只会返回第一个，没找到返回null
2、多个元素：var elems=document.querySelectorAll("任意css选择器");
强调：找打了返回集合，没找到返回空集合
更适合做复杂查找
面试题：getXXX 和 queryXXX 有什么区别？
返回结果不同：
1、getXXX -> HTMLCollection 动态集合
2、queryXXX -> NodeList 静态集合
动态集合 vs 静态集合
动态集合：根据DOM树的改变，动态集合也会一起跟着变化，悄悄再次查找页面元素
缺点：每次都会悄悄重新查找，效率较低了，而且不能使用forEach
静态集合：不会根据DOM树的改变，变化我们的静态集合
优点：每次都不会悄悄重新查找，效率较高了，而且能使用forEach
1、元素的内容：
*1、elem.innerHTML：获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题，可以识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、elem.textContent：获取或设置开始标签到结束标签之间的纯文本，有兼容性问题，不可以识别标签
获取：elem.textContent;
设置：elem.textContent="新文本";
老IE：elem.innerText;//第一次碰到小三上位，原本是只有老IE才可以使用的，但是随着各个浏览器的发展，都可以使用此属性
*3、input.value：获取或设置input的值
获取：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("属性名");
HTML DOM：elem.属性名!="";
强调：
HTML DOM虽然轻松方便，但是有两个小缺陷：
1、只能访问/操作标准属性，不能操作自定义属性
2、ES6诞生后，class变成了一个关键字，class必须写为className
3、删除的时候，HTML DOM设置为空，删不干净属性节点还在，只是值为空了，但是有的属性删不干净，
它依然具有功能，比如：href、disabled，更推荐核心DOM才可能删干净
4、一切的获取都是为了判断，一切的设置都是在修改
3、元素的样式：
1、内联样式：优先级最高，一定会覆盖其他样式
仅仅当前元素可用，不会牵一发动全身
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
唯一的小缺点：获取样式时，只能获取内联样式
2、样式表：
//1、获取你想要操作的样式表
var sheet=document.styleSheets[i];
//2、获取到所有的样式规则
var rules=sheet.cssRules;
//3、数出你要操作的那个样式规则
var rule=rules[i];
//4、获取或设置
console.log(rule.style.background);
rule.style.background="purple";
1、创建元素：3步
1、先创建空标签：
var elem=document.createElement("标签名");
2、为其设置必要的属性和事件
elem.属性名=属性值;
elem.on事件名=function(){}
3、渲染页面 - 上树：3种
*父元素.appendChild(elem) - 将elem追加到父元素里面当儿子，最后一个儿子
父元素.insertBefore(elem,已有子元素) - 将elem追加到父元素里面当儿子，插入在已有子元素的前面
父元素.replaceChild(elem,已有子元素) - 将elem追加到父元素里面当儿子，替换掉已有子元素
2、删除元素：elem.remove();
恭喜你，你的核心DOM全部学习完毕了：增、删、改、查 - 元素、内容、属性、样式。
HTML DOM简化了核心DOM
4、HTML DOM常用对象：
1、image对象：图片对象，仅仅只是简化了创建
var img=new Image();
强调：构造函数方式，不是任何一个元素都可以使用
2、form对象：表单对象，仅仅只是简化了查找，还带了一个专属事件
查找form元素：var form=document.forms[i];
查找input元素：var input=form.elements[i];
专属事件：提交事件：form.onsubmit=function(){}
3、*select对象：带来了2个属性，2个方法，1个事件
属性：select.options - 获取到select下面所有的option === children
select.selectedIndex - 获取选中项的下标，只要是做【联动必备】
方法：select.add(option) === appendChild;
select.remove(i) - 删除i下标的option元素
专属事件：select.onchange=function(){} - 选中项发生改变就会触发事件
4、*option对象：仅仅只是简化了创建，但是非常屌，一句话可以完成4个操作
select.add(new Option("innerHTML","value"));
