ES5/6

一，ES5/6

1、四大特性:Object.defineProperties(obj,{ "属性名":{"value":值,"writable":true,"enumerable":true,"configurable":true}, ... })

2、三个级别： 防扩展：防添加   Object.preventExtensions(obj);

        密封：防添加、删除  Object.seal(obj);

        冻结：防添加、删除、修改  Object.freeze(obj);

3数组的API：   函数名：every/some  forEach/map  filter/reduce
        arr.函数名((val,i,arr)=>判断条件/操作) 

4var child=Object.create(father,{ "属性名":{"value":值,"writable":true,"enumerable":true,"configurable":true}, ...  });

  4、call/apply：临时替换了函数中的this，借，立刻执行 不是自己的方法我们也可以使用（数据类型的结构大致相同）   语法：函数名.call/apply(借用对象,实参);   区别：call：实参需要一个一个传入  apply：只能传入一个实参，并且是一个数组

    bind：永久替换了函数中的this，买，不会立刻执行，需要自己调用
    语法：var 新函数=函数名.bind(指定对象,永久固定实参);

        固定套路：  1、Math.max/min.apply(Math,arr);
            2、Object.prototype.toString.call/apply(arr)=="[object Array]"
            3、将类数组转为普通数组：
              var 新变量=Array.prototype.slice.call/apply(类数组)

   5、严格模式：
    "use strict";
    作用：
      1、禁止了全局污染，禁止给未声明的变量直接赋值
      2、静默失败升级为了错误

2、ES6新特性：
   1、模板字符串：`我希望做出运算${a+b}`

   2、块级作用域：
    let 变量名=值;
    作用：
      1、禁止了声明提前
      2、添加了块级作用域->{}
      3、绑定事件如果你的循环用了let，那么会记录着当前元素的下标

   3、箭头函数：

   4、for...of循环：
    for(var v of arr){
        v;//当前值
    }

二，dom1

1、查找DOM元素/节点/对象：
    1、直接找元素：
       动态集合：每次修改DOM，elems也会跟着发生变化，不支持forEach
       ID：var elem=document.getElementById("id");
       Class/标签名/Name：var elems=document.getElementByTagName/ClassName/Name("Class/标签名/Name");

       静态集合：每次修改DOM，elems不会跟着发生变化，支持forEach - 复杂查找用此方法
       var elem=document.querySelector("选择器")
       var elems=document.querySelectorAll("选择器") div *

    2、通过关系：
       父：xx.parentNode;
       子：xx.children;
       第一个儿子：xx.firstElementChild;
       最后一个儿子：xx.lastElementChild;
       前一个兄弟：xx.previousElementSibling;
       后一个兄弟：xx.nextElementSibling;

    3、层级不明确的情况
        1、递归：除了遍历元素，还可以遍历数据
            function f1(形参){
                第一层要做什么直接做
                判断有没有下一级，有的话再次调用此方法，新的实参
            }
            f1(第一层的内容)

        2、遍历API：tw
            var tw=document.createTreeWalker(root,NodeFilter.SHOW_ELEMENT);
            while((node=tw.nextNode())!=null){
                node做操作
            }
三，dom2

增：
  1、元素：3步
    1、var elem=document.createElement("标签名");
    2、elem.属性名="属性值"
       elem.on事件名=function(){}
    3、父.appendChild(elem);
       父.insertBefore(elem,已有子元素);
       父.replaceChild(elem,已有子元素);

  2、内容：elem.innerHTML/innerText/value+="新内容"

  3、属性：elem.setAttribute("class","d1 d2");

  4、样式：elem.style.css属性名="css属性值";//没有叫添加，有了叫替换

删：
  1、元素：elem.remove();    

  2、内容：elem.innerHTML/innerText/value=""

  3、属性：elem.removeAttribute("属性名");

  4、样式：elem.style.css属性名="";//没有叫添加，有了叫替换

改：
  1、元素：父.replaceChild(elem,已有子元素);    

  2、内容：elem.innerHTML/innerText/value="新值"

  3、属性：elem.setAttribute("class","d2");

  4、样式：elem.style.css属性名="css属性值";//没有叫添加，有了叫替换

查：
  1、元素：
    1、直接找：
        document.getXXX
        document.querySelectorXXX

    2、通过关系查找

    3、层级不明确：递归（元素、数据）、遍历API、纯循环    

  2、内容：elem.innerHTML/innerText/value;

  3、属性：elem.getAttribute("属性名");

  4、样式：elem.style.css属性名;//只能获取内联样式

四，dom3

  1、属性：
    删除：
    判断有没有：elem.hasAttribute("属性名"); -- 只能判断有没有不能判断具体值是什么
    推荐：        if(elem.getAttribute("属性名")=="值"){

            }

  2、样式：
    样式表：
      获取：document.styleSheets[i].cssRules[i].style.css属性名
      设置：document.styleSheets[i].cssRules[i].style.css属性名="css属性值"

  3、渲染页面：3种：最推荐appendChild
     删除元素：

  4、HTML DOM常用对象：个别可以简化

    1、image：var img=new Image();

    2、form：
        var form=document.forms[i]
        var input=form.elements[i]
        onsubmit

    3、select：
        1、options===children
        2、selectedIndex === 获取当前选中项的下标
        3、add()
        4、remove(i) === 删除下标为i的option
        5、onchange

    4、option：
        select.add(new Option("innerHTML","value"))

五，BOM

1、str.trim();//去掉字符串的开头结尾的空白字符

2、var bool=confirm("提示文字");//用户确认框
    用户点击确定->true
    用户点击取消->false

3、BOM对象：*window（定时器）、history、*location、navigator、*****event、screen...

     HTML：<a href="url">文字</a>
              JS：open("url","_self");

HTML：<a href="url" target="_blank">文字</a>
              JS：open("url","_blank");

HTML：<a href="url" target="自定义">文字</a>
              JS：open("url","自定义");

3、下载：<a href="xx.rar/zip/exe">文字</a>
            4、打开图片、txt：<a href="xx.图片后缀/txt">文字</a>
            5、直接书写js：<a href="javascript:js代码;">文字</a>

文档显示区域的大小：body部分 innerWidth/innerHeight

 完整的浏览器大小：outerWidth/outerHeight

屏幕的大小：没用 - 桌面应用才用的screen.width/height

  3、修改窗口的大小：新窗口.resizeTo(newW,newH);
 4、修改窗口的位置：新窗口.moveTo(x,y);

获取鼠标的坐标：1、事件中传入一个形参e->获得到事件对象event（其中一个作用获取鼠标的坐标） 2、获取：
                 e.screenX/Y;//相对于屏幕
                 e.clientX/Y;//相对于浏览器客户端
                *e.pageX/Y;//相对于网页的

1、周期性定时器：先等待，在执行一次，在等待，在执行一次...
                开启：timer=setInterval(callback,间隔毫秒数);
                停止：clearInterval(timer);

2、一次性定时器：先等待，在执行一次，结束
                开启：timer=setTimeout(callback,间隔毫秒数);
                停止：clearTimeout(timer);