ES5

1.保护对象

1.四大特性
    Object.defineProperties{
        属性名:{
            value:实际保存的值,
            writable:true/false,  是否可以被修改
            enumerable:true/false,  是否可以被遍历
            configurable:true/false  是否可以被删除  这一句是总开关，一旦设置为false，其他不能再
            被修改，一旦为false，不可逆。
        }
    }
2.三个级别
    1.防扩展：禁止给对象添加新属性
        Object.preventExtensions(obj)
    2.密封：禁止给对象添加和删除属性
        Object.seal(obj)
    3.冻结：禁止给对象添加、删除和修改属性
        Object.freeze(obj)

2.数组新API

1.判断，结果为一个布尔值
    1.every 每一个，要求每一个结果为true结果才为true
        var bool = arr.every((val,i,arr)=>{
            return 判断条件;
        })
        val:当前值，i:当前下标，arr：数组本身
    2.some 每一个都不满足结果才为false，一个满足就位true，
        var bool = arr.some((val,i,arr)=>{
            return 判断条件;
        })
         val:当前值，i:当前下标，arr：数组本身
2.遍历
    1.forEach 遍历数组，直接修改原数组
        arr.forEach((val,i,arr)=>{
            操作
        })
    2.map 遍历数组，不修改元素组返回一个新数组
        var new = arr.map(()=>{
            return 操作
        })
3.过滤和汇总
    filter 过滤:筛选出自己想要的但是不会修改原数组
        var new = arr.filter((val,i,arr)=>{
            return 判断条件
        })
    reduce 汇总：把数组中的每个元素汇总到一起
        var sum = arr.reduce((prev,val,i,arr)=>{
            return prev+val;
        },基础值)
        prev 初始值为0，基础值会和最后结果加在一起

3.Object.creat()

根据父对象创建子对象，继承已经设置好了
var 子对象 = Object.creat(父对象，{
    自有属性：{四大特性写法}
})

4.严格模式

开启：在任何作用域的顶部加上一句话 use strict
功能：
    1.禁止给未声明的变量赋值
    2.禁魔失败升级为报错

5.call,apply,bind

call,apply:临时替换了函数中的this
    语法：函数名.apply/call(借用的对象，实参...)
    强调：call/apply相当于立刻调用函数，立即执行
bind:永久替换了函数的this
    1.创建了一个和原函数完全相同功能的新函数
    2.将新函数的this永久绑定了指定对象
    3.将新函数中的部分参数永久固定
    语法:var 新函数=原函数.bind(指定对象,永久实参)
    bind不是立即执行，什么时候用，是么时候调用
区别
    call/apply:call只能一个一个传参，apply传的是一个数组
    bind：永久改变了this的指向，不是立即执行
固定套路：
    1.Math.max/min.apply(Math,arr);
    2.Object.prototype.toString.call/apply(arr)
    3.类数组转为普通数组
        类数组名=Array.prototype.slice.call/apply(类数组)

ES6

1.模板字符串

··

2.块级作用域 let

作用：禁止了声明提前
     添加了块级作用域，一个{}就是一个会计作用域
     记录着当前触发时间的元素下标（for循环内的i为当前值）

3.箭头函数：简化回调函数

4.for of （作用不大）

HTML，XML，XHTML，DHTML分别是什么

HTML 网页
XHTML 更严格的网页 <br />
DHTML 动态的网页，使网页在离线状态依然能够有动态效果
      HTML + css + js
XML 数据格式

每个Dom元素都有三大属性

1.nodetype 描述节点的类型
2.nodeValue 属性节点的值
3.nodeName 节点的名称，判断是xx标签

递归

遍历dom树时，由于层级不明确的情况，既可以遍历层级不明的dom也可以遍历层级不明的数据
如何使用：
    function 函数名 (root){
        1.第一层要做什么操作，直接做
        2.判断有没有下一级，如果有，再次调用函数，传入的实参为他的下一级
    }
    算法：深度优先，优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点
    缺点：同时开启大量的函数，浪费内存、

遍历层级不明的API TreeWalker

1.var tw = document.createTreeWalker(根元素，NodeFilter.show_Element);
2.反复调用 nextNode方法找下一个元素
    while((node = tw.nextNode())!=null){
        node 要做什么操作
    }

通过css选择器获取元素

document.querySelector()
document.querySelectorAll()
面试题：
    getxxx和query的区别
        getxxx返回的是一个动态集合，根据Dom树的改变，动态集合也会一起改变，每一次修改dom树，动态
        集合就会改变，并且不能使用forEach
    query 返回的是静态集合，不会发生改变，不会重复查找效率更高，可以使用forEach

元素的属性

删除属性：
    核心Dom：elem.removeAttribute("属性名")
    HTMLDom elem.属性名 = ""
    HTMLDom 确实比较简单，但只能操作标准属性，不能操作自定义属性，而且删除属性的时候删不干净，比如
    href为空时，为刷新disable没有属性值依然为禁用，所以更推荐核心dom删除

元素的样式

获取样式表
    var sheet = document.StyleSheets[i]
    获取所有样式
        var rules = sheetcssRules
     数出想要操作的样式
         var rule = rules[i]
     最后做操作

将元素渲染到dom树种

 appendchild(元素)
 insetBefore（元素,已有子元素）
 replaceChild(元素，y已有子元素)
 ele.remove() 删除元素

HTML Dom常用对象

 1.form对象
     查找:form = document.forms
     查找表单元素 let inp=form.elements
     专属事件：form.onsubmit(){return false 为阻止提交}
 2.select对象
     属性：select.options 得到select下所有option
          select.selectedIndex 得到选中项的下标
     方法：select.add(option)
          select.remove(i)
 3.option 对象
     创建
         var opt = new Option("innerHTML","value")
     select.add(new Option("innerHTML","value"))

Bom对象

1.网页打开新链接的方式

1.替换当前页面可以后退
    open("url","_self")
2.替换当前页面禁止后退 场景：付款后禁止后退
    history:记录着当前窗口历史记录，只有有历史才能前进后退
    location:记录着当前页面的url。有一个方法替换，不会产生记录
        location.replace("url")
3.在新窗口打开：可以打开多个
    open("url","_blank")
4.在新窗口打开，只能打开一个 场景：只能打开一个付款页面
    open("url","自定义name")
    意思是每一个窗口底层都有一个名字，如果重新打开相同name就会给原窗口替换掉

2.a标签的使用

1.跳转
2.锚点
3.下载 <a href="xx.exe/rar/zip"></a>
4.打开 <a href="xx.txt/图片后缀"></a>
5.直接写js <a href="js语句;"></a>

3.window提供的属性和方法

1.获取浏览器的大小
    outerWidth/outerHeight
2.浏览器文档区大小
    innerWidth/innerHeight
3.获取屏幕大小
    screen.width/scree.height
4.打开新窗口
    var new = open("url","target","width,height,top,left");
    第三个参数未配置时大小和浏览器一样，有了第三个参数会脱离浏览器
    宽高不能设置得太小
5.关闭窗口
    new.close()
6.修改窗口大小
    new.resizeTo(width,height)
7.修改窗口位置
    new.moveTo(top,left)

4.获取鼠标位置

1.在事件函数中传入参数e，自动获取到event对象
2.获取坐标
    e.screenX/Y 相对于屏幕
    e.clientX/Y 相对于文档显示区
    e.pageX/Y 相对于页面

5.Bom的其他对象

history,location,navigator,event
1.history对象
    history.go(n) 正数前进，0刷新，负数后退
2.location对象
    1.常识：url的组成
        协议：https/http/ftp/ws
        域名/主机号：域名是需要购买的，没有购买的都是主机号
        端口号：默认的端口号可以不写 https:443 http:80
        文件相对路径： 一般都是被加密隐藏了
        查询字符串：get表单提交的信息
    2.属性和API
        1.属性：获取到一份url的各个部分，不要记忆直接输出location查看
        2.功能：
            1.location = “url” 在当前页面打开新页面
            2.location.href = "url";
            3.location.assign("url")
            4.location.replace("url"); 跳转后禁止后退
            5.location.reload() 刷新
3.navigator对象
    保存浏览器的基本信息，通过js来判断打开的浏览器是什么浏览器，并且判断版本号，类似css Hack
    （但是css Hack只能操作IE）
    属性：navigator.userAgent
4.event对象
    1.绑定事件。3种
        1.在HTML种绑定
        2.在js种绑定
        3.使用专门的事件API绑定，有兼容性问题
            优点：可以同时绑定多个函数
            主流：elem.addEventListener("事件名",callback)
            IE:elem.attachEvent("on事件名",callback)
            兼容：if(elem.addEventListener){
                elem.addEventListener("事件名",callback);
            }else{
                elem.attachEvent();
            }
    2.事件周期：从事件发生到所有事件处理函数执行完毕的全过程
        主流：3个阶段
            1.捕获阶段：记录要发生的事件有哪些
            2.目标优先触发：目标函数
            3.冒泡触发：向上触发所有记录着的事件
        IE：2个阶段，没有捕获阶段
    3.获取事件对象event
        主流：会自动作为事件处理函数的第一个形参传入
            elem.on事件名 = e=> {e->event}
        IE:event
            兼容：e = event  IE主流都可以用
        1.获取鼠标的坐标位置
            e.screenX/Y
            e.clientX/Y
            e.pageX/Y
        2.阻止冒泡
            主流：e.propagation();
            IE:e.cancleBabble = true;
        3.事件委托 开发中常利用，提高网页性能
            如果多个子元素定义相同或相似的操作，最好只定义一次给父元素
            1.目标元素 target
                主流：e.target
                IE: e.srcElement
                兼容：let target = srcElement；
        4.阻止浏览器默认行为
            主流：e.preventDefault();
            IE e.returnValue = false
            两个新事件：
                1.oncontextmenu  点击鼠标右键
                2.onkeydown 键盘按下
        5.获取键盘的键码
            e.keyCode

客户端存储技术

1.cookie 已经逐渐被淘汰了
2.webStorage：
    1.localStorage 本地级，永久保存
    2.sessionStorage 会话级，只要浏览器关闭就消失
作用：跳转页面数据依然存在
    1.添加：xxStorage.属性名 = 值
    2.获取：xxStorage.属性名
    3.清空：xxStorage.clear()
    4.删除：xxStorage.removeItem("属性名")