第四周JS回忆

day16
    ES5
        ES5:
1.保护对象：保护对象的属性和方法
①四大特性：每个属性都有四大特性
{
                    "value": 3500, //实际保存属性值的地方
                    "writable": true,//开关：控制着是否可以被修改
                    "enumerable": true,//开关：控制着是否可以被for in循环遍历到
                    "configurable": true//开关：控制着是否可以被删除
            }

修改四大特性：
Object.defineProperties(obj,{"属性名":{四大特性}}）
2.三个级别：
①防扩展：禁止给对象添加任何新属性
Object.preventExtensions(obj);
②密封：禁止给对象添加任何新属性，也不能删除属性
Object.seal(obj);
③冻结：禁止给对象添加任何新属性，也不能删除属性，也不能删除属性
Object.freeze(obj);
        数组的新的API：3组6个：
1.判断：判断数组中的元素是否符合要求
every_每一个：判断数组中的每个元素都要符合要求，最后才为true，类似于&&，只要有一个不满足，结果就为false
语法：arr.every(function(val,i,arr){return判断条件})
语法：var bool=arr.every(function(val,i,arr){
console.log(val);//当前元素
console.log(i);//当前元素的下标
console.log(arr);//数组本身
return 判断条件;
                       })

some-有一些：判断数组中是否包含符合要求的元素，只要有一个最后结果为true，类似||,只有全不满足才会不满足
arr.some(function(val,i,arr){return判断条件})
2.遍历:对每个元素执行相同或相似的操作
forEach:直接修改原数组
语法：arr.forEach(function(val,i,arr){操作;})

map:不修改原数组，返回新数组
语法:var newArr=arr.map(function(val,i,arr){return 操作;})
3.过滤和汇总
过滤：筛选出原数组中符合条件的元素组成一个新数组，原数组不变
语法:var newArr=arr.filter(function(val,i,arr){return 判断条件;})
汇总：将数组中每一个元素，取出来整合为一个最终结果
语法:var sum=arr.reduce(function(prev,val,i,arr){return 判断条件;},基础值)

以上6个API都是为了简化for循环，强调：以上API仅数组可用

4.Object.create()方法：直接用父对象创建子对象，并且子对象扩展自有属性

5.严格模式：很严格
如何开启："use strict",可放在任何一个作用域的顶部
①禁止给未声明的变量赋值-解决了全局污染
②将静默失败升级为了错误

*****call,aplly,bind:
1.call,aplly:临时替换函数中的this,借用
差别：call，要求传入函数的实参必须单独传入
aplly,要求传入函数的实参必须是一个数组
语法：要借用的函数.call(借用的对象，实参1,...)；
要借用的函数.aplly(借用的对象,arr);-aplly除了有借用的功能，还会悄悄打散我们的数组

2.bind:永久替换函数中的this,买
语法：var新函数=老函数.bind(指定的对象)
3件事：
1.创建了一个和原函数功能完全一样的新函数
2.将新函数中的this永久绑定为你指定的对象
3.将新函数中的部分参数永久固定
强调：bind绑定在新函数中的this,无法被call,apply再次替换借走

总结：如果临时调用一个函数，立刻执行--call/apply
如果创建一个函数提前绑定this，不一定希望立刻执行-bind

使用场景：
1.比较数组中的最大值和最小值Math.max/min.apply(Math,arr)
2.得到Object最原始的toString:Object.prototype.toString.call/apply(arr);
将类数组变为普通数组：var 新数组=Array.prototype.slice.call/apply(类数组对象);

var newArray=Array.from(类数组);
ES5简化版：接住=Array.from(类数组对象)
    ES6
        新语法：
1.模板字符串:简化字符串拼接
语法：`我的名字叫${name}`
在字符串中，实现了简单的js环境
*2.let关键字：优先使用let,在考虑var
let 变量名=值;
优点：①.解决了声明提前
②.添加了块级作用域，一个{}就是一个块
③.如果绑定事件，用let来遍历，那么let会记住你当前元素的下标，不用再自定义了
3.箭头函数：简化一切回调函数
去掉function,()和{}之间添加=>,形参只有一个可以省略()
函数体只有一句话，省略{}
函数体只有一句话，并且是return，省略{}和return
4.for...of
day17
    什么是DOM:Document Object Model(文档对象模型)
将每一个标签、属性、文本、注释、元素，都看做是一个DOM元素、节点、对象（提供了一些操作元素的属性、方法）

面试题：
html/XHTML/DHTML/XML分别是什么？
1.HTML-网页
2.XHTML-更严格的HTML,HTML5->XHTML->HTML4.01
3.DHTML-动态的网页：D:Dynamic
DHTML:html+css+js(dom)
4.XML:未知的标记语言，一切的标记由自己定义，数据格式

DOM：原本是可以操作一切结构化文档的HTML和XML，后来为了方便各类开发者分为了3部分
1.核心DOM：【无敌】，既可以操作HTML,也可以操作XML
缺陷：API比较繁琐
2HTML DOM:只能操作HTML，API简单，缺陷：比如属性部分，只能访问标准属性，不能访问自定义属性
3.XML DOM:只能操作XML，XML已经淘汰-现在流行JSON

2.DOM树：树根：document-不需要我们创建，一个页面只有一个document对象，由浏览器的JS解释器自动创建
作用：可以通过树根找到页面上每一个DOM元素、节点、对象，也可以操作它

3.每个元素都有三大属性：
1.elem.nodeType:描述节点的类型
document节点：9
element:1
attribute:2
text:3

2.elem.nodeValue：描述节点的值

3.***elem.nodeName:描述节点的名字
帮助我们拿到当前元素的标签名，判断XX是什么标签
注意：返回的是一个大写的标签名

4*通过关系获取元素：
父:xx.parentNode
子：xx.children集合，只能找到儿子
第一个儿子: xx.firstElementChild
最后一个儿子: xx.lastElementChild
前一个兄弟:xx.previousElementSling
后一个兄弟:xx.nextElementSibling

5.*****递归：简单来说就是函数中，又一次调用函数自己，迟早有一天会停下来
何时用：遍历DOM树，专门用于【遍历层级不明确】的情况，既可以遍历层级不明确的DOM树，也可以遍历层级不明确的数据！

如何使用：2步
function 函数名(){
1.第一层要做什么直接做！
2.判断他有没有下一级，如果由下一级，再次调用此函数，但是传入的实参是他的下一级元素
}
函数名（实际的根）

算法：深度优先！优先遍历当前元素的子元素，子节点遍历完才会跳到兄弟节点
缺点：调用大量函数，消耗大量内存。在层级不清楚的时候再用

递归VS循环
递归：优点：直观，易用
缺点：性能低，尽量只在层级不明确的时候使用

循环：优点：几乎不占用内存
缺点：难得咬鸭儿

6、专门提供了一个遍历层级不明确的DOM树的API：TreeWalker - 这是一个在DOM树上行走的人

    2步：

    1、先创建出tw：
        var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);

    2、tw对象过后，你会得到一个方法，反复调用nextNode方法找到下一个节点，迟早有一天会等于null，说明没找到，公式
        while((node=tw.nextNode())!=null){
            node要干什么
        }
        缺陷：
           1、自动的跳过根元素，根元素是不会做任何操作的
           2、仅仅只能遍历层级不明确的DOM树，不能遍历层级不明确的数据7、API直接找元素：

    1、根据HTML的特点去找元素

        ID：var elem=document.getElementById("id值");
        *标签名和*class和name：var elems=document.getElementsByTagName/ClassName/Name("标签名/class名");

    2、***根据CSS选择器去找元素：
        1、单个元素：
            var elem=document.querySelector("任意的css选择器");
            强调：万一选择器匹配到多个，只会返回第一个
                      没找到null

        2、***多个元素：
            var elem=document.querySelectorAll("任意的css选择器");
            强调：找到了返回集合，没找到返回空集合
            更适合做复杂查找 - 个人更喜欢他

    面试题/笔试题：
        getXXX 和 querySelectorAll 有什么区别？
        返回结果不同的：
            1、getXXX：返回的是要给动态集合HTMLCollection
                优点：数据始终和DOM树实时挂钩
                缺点：每次DOM树进行修改，都会悄悄的再次查找元素，效率相对较低
    
            2、querySelectorAll：返回的是要给静态集合NodeList
                优点：每次不会悄悄重新查找，效率较高，而且还支持使用forEach！2.根据CSS选择器找元素：
1.单个元素：
var elem=document.querySelector("任意的css选择器");
day18
    操作元素：
        1.元素的内容：
①elem.innerHTML:获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题的，可识别标签
获取：elem.innerHTML
设置：elem.innerHTML="新内容"
②elem.textContent:获取或设置开始标签到结束标签之间的纯文本，有兼容性问题的（老IE不支持），不能识别标签
获取：elem.textContent
设置：elem.textContent="新内容"
老IE：elem.innerText
③.*input.value:获取或设置表单控件的值-只要你做正则验证
获取：input.value
设置：input.value="新值"

2.元素的属性：
①获取属性值：
核心DOM:elem.getAttribute("属性名");
HTML DOM:elem.属性名；
②设置属性值：
核心DOM:elem.setAttribute("属性名"，"属性值")
HTML DOM:elem.属性名="属性值"
3.删除属性值：
核心DOM:elem.removeAttribute("属性名")
HTML DOM:elem.属性名=""-删不干净
4.判断有没有属性：-垃圾
核心DOM:elem.hasAttribute("属性名")
HTML DOM:elem.属性名!=""

3.元素的样式：
1*内联样式
    创建元素并且渲染DOM树：3步
        1.创建空标签：
var elem=document.createElement("标签名")；
2.添加必要的属性和事件
elem.属性名="属性值"；
elem.on事件名=function(){操作};
3.上树：将js内存中的新标签放到DOM树上
父元素.appendChild(elem);将elem追加到父元素里当最后一个儿子

2.删除元素：elem.remove();

    HTML DOM常用对象：简化[核心DOM]
        1.image对象：仅仅只是简化了创建语句
创建：var img=new Image();===

2.form对象：简化了查找元素