二阶段 es5 6 dom

1、ES5新的API操作 1、保护对象： 1、修改四大特性 Object.defineProperties(对象名,{ "属性名":{ value:实际的值, writable:true/false,控制着是否可以被修改 enumerable:true/false,控制着是否可以被for in遍历 configurable:true/false,控制着是否可以被删除，总开关，一旦改为false其他三大特性不可以再修改，不可逆 } })

	2、三个级别
		Object.preventExtensions(对象名); - 防扩展
		Object.seal(对象名) - 密封
		Object.freeze(对象名) - 冻结

2、数组的API：
	判断：var bool=arr.every/some((val,i,arr)=>判断条件);

	遍历：arr.forEach((val,i,arr)=>操作);
	           var newArr=arr.map((val,i,arr)=>操作);

	过滤：var subArr=arr.filter((val,i,arr)=>判断条件);
	           var sum=arr.reduce((prev,val,i,arr)=>操作,基础值);

3、var 子对象=Object.create(父对象,{
	"自有属性名":{四大特性},
	...
      })

4、严格模式："use strict";
	1、静默失败升级为报错
	2、禁止了全局污染

5、*****call/apply/bind：
	call/apply：临时替换了函数中的this
	语法：函数.call(借用的对象,实参,...)
	           函数.apply(借用的对象,[实参,...])
	强调：立刻调用立刻执行

	bind：永久替换了函数中的this
	语法：var 新函数=函数.bind(绑定的对象,永久实参,...)
	强调：不会立刻执行，需要手动调用

2、ES6语法的简化 1、我的名字叫${name}

2、let 变量名=值
	1、解决了声明提前
	2、添加了块级作用域 - {}
	3、记录了当前触发事件的元素的下标

3、箭头函数
	function去掉
	()和{}之间添加=>
	形参只有一个，省略()
	函数体一句话，省略{}
	函数体一句话且是return，省略{}和return

4、for(var v of arr){
	v;当前值
      }

	不能遍历hash数组
	不能操作原数组
            
            

查找元素： 0、DOM分类： 1、核心DOM 2、HTML DOM 3、XML DOM

1、直接找元素
	id：var elem=document.getElementById("id值");
	className/tagName/Name：var elems=document/父元素.getElementsByclassName/tagName/Name("xxx");

	选择器：
	var elem=document.querySelector("任意css选择器");
	var elems=document.querySelectorAll("任意css选择器");

	返回：HTMLCollection - 动态集合：根据DOM树的变化，会悄悄的再次找元素 - 但是不能用forEach
	           NodeList - 静态集合：可以使用forEach，可以简化为箭头函数

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

3、层级不明确的情况：
	1、递归：不能多用，只在层级不明确的情况
		function dg(根形参){
			1、第一层要做什么直接做

			2、判断有没有下一层，有的话，再次调用此方法，传入新的实参（下一层）
		}
		dg(根数据/根元素)

	2、遍历API：只能遍历DOM树
		var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT);
		while((node=tw.nextNode())!=null){
			node要干什么
		}
                    

元素： 1、增： var elem=document.createElement("标签名");//有两个人可以简化：new Image/Option() elem.属性名="值" 父元素.appendChild(elem); 父元素.insertBefore(elem,已有子元素); 父元素.replaceChild(elem,已有子元素);

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

3、删：elem.remove();

4、查： 直接找： var elem=document.getElementById("id值"); var elems=document.getElementsByTagName/ClassName/Name("TagName/ClassName/Name");

	var elem=document.querySelector("任意css选择器");
	var elem=document.querySelectorAll("任意css选择器");

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

层级不明确：递归
	function xx(根元素/根数据){
		只管第一层，判断有没有下一层，有的话再次调用此函数，传入下一层
	}

文本：innerHTML/innerText/value 1、增：xx.api+="新值";

2、删：xx.api=""

3、改：xx.api="新值"

4、差：xx.api

属性： 1、新增：xx.setAttribute("属性名","旧属性值 新属性值"); xx.setAttribute("class","d1 d2")

2、删除：xx.removeAttribute("属性名");

3、修改：xx.setAttribute("属性名","新属性值");

4、查找：xx.getAttribute("属性名");

样式：不要记忆样式表操作，太繁琐了 1、新增：xx.style.css属性名="css属性值"; - 可能是改

2、删除：xx.style.css属性名=""

3、查找：xx.style.css属性名; - 只能操作内联样式

---

HTML DOM常用简化对象： 1、select：属性：selected - 获取到当前选中项的下标 方法：add(option) - appendChild 事件：onchange

2、option：
	var opt=new Option("innerHTML","value");