js总结4（bom&dom&ES5&ES6）

一、ES5新提供的

        1、保护对象：每个对象都有四大特性："属性名":{"value":实际保存值的地方,"writable":true,"enumerable":true,"configurable":true},    configurable:控制着是否可以被删除， 总开关，一旦改为false其他特性不能再做修改。

        三个级别：防扩展：Object.preventExtensions(obj);密封：Object.seal(obj);冻结：Object.freeze(obj);

        2、数组新API：

        判断：var bool=arr.every/some((val,i,arr)=>判断条件);

        遍历：arr.forEach((v,i,a){     操作})； var newArr=arr.map((val,i,arr)=>操作);--map不会修改原数组

        过滤：var subArr=arr.filter((val,i,arr)=>判断条件)

        汇总：var sum=arr.reduce((prev,val,i,arr)=>prev+val);

       借用：

固定的三个用法：

        查找数组里最大值或最小值：Math.max/min.apply(Math,arr)

        查看数据类型：Object.prototype.toString.call/apply(**)

        将类数组转为普通数组：var newName=Array.prototype.slice.call/apply(类数组)

        严格模式：use strict；

        ES6的：模板字符串：`${变量}`；let方式，可以代替var ，会有一个块级作用域，阻止了声明提前，绑定了事件的多个元素，会记录着他的下标；箭头函数：所有的回调函数都可以简化成箭头函数

二、dom

        1、DOM树：树根：document

        2、dom元素的三大属性：xx.nodeType:会返回一个数字，每种元素返回的数字不一样；xx.nodeValue:获取属性节点的值

        xx.nodeName：获取属性节点的值，返回的是一个大写的标签名

        3、查找元素：

通过 HTML 的属性来查找元素
    ID：var elem=document.getElementById("id");
    标签名：var elems=document.getElementsByTagName("标签名");
    class名：var elems=document.getElementsByClassName("标签名");
    name名：var elems=document.getElementsByName("name值"); - 表单控件使用

通过 CSS 选择器来查找元素
    var elem=document.querySelector("任意css选择器");
    强调：万一匹配到多个元素，也只会返回第一个，没找到返回null
    var elems=document.querySelectorAll("任意css选择器");
    强调：找到多个元素
    使用场景：复杂查找时

    父：xx.parentNode;
    子：xx.children;
    第一个儿子：xx.firstElementChild;
    最后一个儿子：xx.lastElementChild;
    前一个兄弟：xx.previousElementSibling;
    下一个兄弟：xx.nextElementSibling;

        递归：简单来说就是一个函数中再一次调用了自己本身，肯定有一刻会让他停下来
    何时：遍历DOM树，专门用于【遍历层级不明确】的情况
    如何：2步
        1、创建一个函数：
            function 函数名(root){
                //1、第一层要做什么操作，直接做
                //2、判断他有没有下一级，如果有的话再次调用此方法，但是传入的实参变成他的儿子
            }        
        2、调用函数，传入根节点
            函数名(实际的root)

        4、操作元素：

         内容：innerHTML/innerText/value

        属性：
      核心：getAttribute("属性名")/setAttribute("属性名","属性值")/removeAttribute("属性名")
      HTML：elem.属性名/elem.属性名="属性值"/elem.属性名=""

        样式：
              内联：elem.style.css属性名
              样式表：
              var sheet=document.stylesheets[i];
                var rules=sheet.cssRules;
                var rule=rules[i];
                rule.style.css属性名

        4、JS创建元素和渲染

        创建元素&渲染DOM树
    var a=document.createElement("a");
    a.innerHTML="百度一下";
    a.href="url"
    父亲.appendChild(a);
    父亲.insertBefore(a,已有子元素);
    父亲.replaceChild(a,已有子元素); 

        删除：elem.remove();

三、BOM 

        1、定时器：先等待再执行

        周期性：setInterval()；一次性定时器：setTimeout；停止定时器：clearInterval(timer);

        2、获取位置

                1、获取浏览器完整大小：outerWidth.outHeight;

                2、获取浏览器的文档显示区域：innerWidth innerHeight;

                3、屏幕大小：screen.width screen.height

                4、获取鼠标的位置：e.screenX    e.screenY;//相对于屏幕的坐标
                    e.clientX    e.clientY;//相对于文档显示区域的坐标
                    e.pageX        e.pageY;//相对于网页的坐标

        3、location对象：保存当前窗口的url网址：跳转：location=“新url”；替换location.replace("新url")，就不能后退了；刷新：location.reload();

        4、客户端存储--相当于cookie

                localStorage本地级，sessionStorage会话级

                设置：xxxStorage.自定义=值；

                读取：xxxStorage.自定义；

                删除和清空：xxxStorage.removeItem("属性名");xxxStorage.clear(); -- 清空所有数据

        5、event：事件对象

                获取事件对象：事件函数中第一个形参；老IE：var e=event；

                阻止冒泡：让点击子元素而不影响父元素

兼顾着老IE
if(e.stopPropagation){
				e.stopPropagation
			}else{
				e.cancelBubble=true;
			}

                事件委托：将绑定事件绑定在父元素身上，利用冒泡，来减少事件的绑定，提升网页性能。