一、

1、ES5：

提供了很多新的API

1、保护对象：

1、四大特性：Object.defineProperties(obj,{
			"属性名":{value:真正保存值的地方,writable:true/false,enumerable:true/false,configurable:true/false},
			...
	     });

2、三个级别：

	Object.preventExtensions(obj);//防扩展：防止添加
	Object.seal(obj);//密封：防止添加、删除
	Object.freeze(obj);//冻结：防止添加、删除、修改

2、*数组API：

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

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

3、过滤：var subArr=arr.filter((val,i,arr)=>判断条件);
   汇总：var sum=arr.reduce((prev,val,i,arr)=>prev+val);

3、

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

4、严格模式：

"use strict";
 功能：1、解决全局污染
      2、静默失败升级为了报错

5、*call/apply/bind - 不是自己的方法，其实也可以借用/买

call/apply：临时替换了函数中的this
语法：函数名.call/apply(指定的对象,实参); - 立刻执行
	call要是实参单独传入
	apply要求传入的实参只有一个是一个数组

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

固定套路：将类数组转为普通数组：var 普通数组=Array.prototype.slice.call/apply(类数组对象)
		      简化版：var 普通数组=Array.from(类数组);

2、ES6：语法改变较大 - 简化

1、模板字符串：

`我今年${age}岁` - ${}其实实现了一个简单js环境，可以在里面做运算、API的使用

2、块级作用域：

创建变量的新方式：let 变量名=值;
功能：1、解决声明提前
      2、提供了块级作用域 - 一个{}里面的东西现在出不来了，建议大家优先使用let
      3、绑定事件如果用了let，记录着当前元素的下标

3、箭头函数：

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

4、for...of：

 不能修改原数组，不能遍历hash数组（对象）

二、找元素：

1、直接查找：

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

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

	NodeList：静态集合，效率高，可以使用forEach - 一般情况
	HTMLCollection：动态集合，效率低，会反复查找元素

2、找关系：

前提至少找到一个人才可以使用关系
父：xx.parentNode
子：xx.children
第一个儿子：xx.firstElementChild;
最后一个儿子：xx.lastElementChild;
前一个兄弟：xx.previousElementSibling;
后一个兄弟：xx.nextElementSibling;

3、遍历层级不明确的情况：

1、递归：

    简单，好用，效率较低，只在遍历层级不明确的DOM树和数据时才会使用
	function 函数名(root){
		第一层要做什么操作直接做
		判断自己有没有下一层，如果有的话再次调用此方法，但是传入的实参已经变成了自己的下一层了
	}
	函数名(起点)

2、遍历API：

    简单，好用，只能遍历层级不明确的的DOM树，自动跳过起点
	1、var tw=document.createTreeWalker(起点,NodeFilter.SHOW_ELEMENT);

	2、while((node=tw.nextNode())!=null){
		node做什么操作
	   }

4、每一个DOM元素/对象/节点都有三大属性：

xx.nodeName; -- 获取此元素的标签名;
    

三、

<elem 属性名="属性值" style="样式名:样式值">内容</elem>
强调：页面上获取和设置的一切数据类型都是字符串

1、元素的内容：

*1、elem.innerHTML：

   获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题，可以识别标签
	获取：elem.innerHTML
	设置：elem.innerHTML="新内容"

2、elem.textContent：

    获取或设置开始标签到结束标签之间的纯文本，具有兼容性问题，不能识别标签
	获取：elem.textContent
	设置：elem.textContent="新内容"
       *老IE：elem.innerText;//第一次碰到小三上位，原本是只有老IE才可以使用的，但是随着各个浏览器的发展，IE没有将就大家，反而是其他主流浏览器去将就了老IE

*3、input.value：

   获取或设置单标签（能写内容的单标签）的内容的
	获取：input.value;
	设置：input.value="新内容"

2、元素的属性：

*1、获取属性值：

	核心DOM：elem.getAttribute("属性名");

	HTML DOM：elem.属性名;

*2、设置属性值

	核心DOM：elem.setAttribute("属性名","属性值");

	HTML DOM：elem.属性名="属性值";

*3、删除属性：

	核心DOM：elem.removeAttribute("属性名");

	HTML DOM：elem.属性名="";

4、判断属性：

     只能判断有没有，不能判断具体是什么
	核心DOM：elem.hasAttribute("属性名");

	真的想要判断，更推荐：
		if(elem.getAttribute("class")=="d1"){
			使用获取的方式能判断出具体是什么class
		}

强调：HTML DOM确实简单，但是需要注意：
	1、class写为className
	2、只能操作标准属性，不能操作自定义属性
	3、删除的时候，删不干净，有的属性删不干净依然具有功能，比如href没有属性值默认为刷新、disabled就算没有属性值依然是禁用操作...,跟推荐删除的时候使用核心DOM

3、元素的样式：

1、内联样式：

    优先级最高，一定会覆盖其他的样式
	     仅仅当前元素可用，不会牵一发动全身
	获取样式：elem.style.css属性名
	设置样式：elem.style.css属性名="css属性值"

	唯一的缺点：获取样式时，也只能获取内联样式

2、样式表：

		//1、获取你想要操作的样式表
		var sheet=document.styleSheets[1];
		//2、获取这个样式表中所有的样式规则
		var rules=sheet.cssRules;
		//3、数出你想要操作的那个样式规则
		var rule=rules[30];
		//4、操作：获取和设置
		console.log(rule.style.background);
		rule.style.background="purple"

四、

1、创建元素和渲染DOM数据：3步

1、创建空标签：
	var elem=document.createElement("标签名");

2、为这个空标签添加必要的东西（属性或事件）
	elem.属性名="属性值";
	elem.on事件名=function(){}

3、将在内存中创建的元素渲染到DOM树上
       *父元素.appendChild(elem);//将elem追加到父元素里面当了最后一个儿子
	父元素.insertBefore(elem,已有子元素);//将elem追加到父元素里面当了儿子，会插在已有子元素的前面 - 导致所有元素的下标都会改变
	父元素.replaceChild(elem,已有子元素);//将elem追加到父元素里面当了儿子，会替换掉已有子元素

2、删除元素：

elem.remove();

总结：

    DOM到底干了什么事？
增、删、改、查（DOM结构：元素、文本、属性、样式）

3、HTML DOM常用对象：

【简化】核心DOM

1、image对象：

    仅仅只是简化了创建语句
	创建：var img=new Image();//完全等效于var img=document.createElement("img");
	注意：不是人人都有构造函数创建方式

2、form对象：

    简化了查找元素
	查找form元素：var form=document.forms
	查找form元素中的表单控件：var input=form.elements
	专属事件：form.onsubmit=function(){//提交事件，只会在提交的一瞬间触发：防止用户输入错误也能提交
			return false;//阻止条件
		  }

3、*select对象：

	属性：1、*select.options;//得到select下面所有的option，完全等效于xx.children
	      2、*select.selectedIndex;//获取到当前选中项的下标 - 只要是做联动就必然会用到

	方法：1、*select.add(option);//完全等效于appendChild
	      2、select.remove(i);//删除掉下标i的option

	专属事件：select.onchange=function(){//只有选中项发生变化的时候才会触发}

4、*option对象：

    仅仅只是简化了创建语句
	*创建：var opt=new Option("innerHTML","value");

建议：HTML DOM别的无所谓，关键select和option：如果你想要一句话将option创建出来放入到select中：
		select.add(new Option("内容","值"))

五、

1、浏览器提供了3个弹出框

1、用户输入框：var user=prompt("提示文字","默认值");

2、警告框：alert("警告文字");

3、用户确认框：var bool=confirm("提示文字");

2、百度/高德地图：

1、定位技术：

	GPS - 美国，版权费（缺点：1、交钱  2、安全性）
	北斗 - 中国全自主，军用 - 惯性定位（不准确）
		     后去，民用 - 添加卫星定位（车联网，物联网）
	基站 - 信号定位
	IP定位 - 比如你上网发表不正当的言论

2、百度/高德地图已经帮我们实现好了基本技术，只需要使用

	固定步骤：
		1、打开百度：搜索 - 百度地图开放平台，点击进去https://lbsyun.baidu.com/
		2、注册/登录百度账号
		3、拉到最下面，注册为开发者
		4、应用管理->我的应用->创建应用
		5、名字随意，选择浏览器端，白名单写为*，获取到了密钥
		6、鼠标放到导航栏上，开发文档->javascript API->示例DEMO
		7、选择你喜欢的地图，然后修改经纬度
		8、如果你同时看上了多个地图，可以混搭，但是千万记住（webgl版和普通版不能混搭其他都可以）
		9、作用：为了你的网站看上去更美观、更专业、
                    

六、

1、BOM：

   Browser Object Model：浏览器对象模型：专门用于操作浏览器的API，没有标准（大部分浏览器还是统一的实现了API，除了老IE），BOM使用较少
重点：定时器、事件对象event

2、window对象介绍：

扮演着2个角色
1、代替了ES中的global，充当全局对象
2、自己也带有一些属性和方法，指代当前窗口本身

3、window对象提供的东西：

1、网页打开新链接的方式：4种
	1、替换当前页面，可以后退：
		HTML：<a href="url">内容</a>
		  JS：open("url","_self");

	2、替换当前页面，禁止后退： - 场景：电商网站：付款后，禁止后退
		history对象：记录着当前窗口的历史记录，只有有了历史才能前进后退
		location对象：记录着当前窗口的正在打开的url，他有一个方法叫做替换，不会产生历史记录
		  JS：location.replace("新url");

	3、在新窗口打开，可以打开多个：
		HTML：<a href="url" target="_blank">内容</a>
		  JS：open("url","_blank");

	4、在新窗口打开，只能开打一个：- 场景：电商网站：只允许用户打开一个付款页面
		HTML：<a href="url" target="自定义name">内容</a>
		  JS：open("url","自定义");
		意思是：每一个窗口其实底层都有一个名字，如果重新打开相同name，新打开的窗口会将就的窗口给替换掉，_self->自己窗口的名字，_blank->新建一个随机的名字

总结：

	  1、HTML能做的，JS都能做，JS能做的，HTML不一定可以
	  2、不同的跳转方式，可以提升用户的体验感

扩展：

a标签的作用：

		1、跳转
		2、锚点
		3、下载：<a href="xx.安装后缀/压缩包后缀">内容</a>
		4、打开：<a href="xx.txt/图片后缀">内容</a>
		5、直接书写javascript：<a href="javascript:js语句;">内容</a> - 可以不用绑定点击事件

2、window提供的属性和方法：

	属性：获取浏览器的完整大小：outerWidth/Height;
	     *获取到浏览器的文档显示区域的大小：innerWidth/Height; - body的大小
	      获取到屏幕的完整大小：screen.width/height;

	方法：1、打开窗口：var newW=open("url","target/自定义","width=,height=,left=,top=");
			注意：1、第三个配置参数没有传入时，大小和浏览器一样，并且粘在浏览器上面的，但是如果有了第三个参数，脱离浏览器
			      2、宽高不能设置的太小了
	      2、关闭窗口：window/newW.close();
	      3、修改窗口的大小：newW.resizeTo(newW,newH);
	      4、修改窗口的位置：newW.moveTo(x,y);

***获取鼠标的位置：2步

	1、在事件函数中的小括号里传入一个形参e，自动获取到事件对象event
	2、获取坐标：
		e.screenX/Y - 鼠标相对于屏幕的坐标：鼠标就算在最上面也是70px左右
		e.clientX/Y - 鼠标相对于文档显示区域的坐标：网页不管多长多大，始终顶部是0，底部是900多
	       *e.pageX/Y   - 鼠标相对于整个页面的坐标 - 跟随我们的网页变化
	完成鼠标跟随动画：
		1、window/document.onmousemove - 在页面的任何位置移动鼠标都会触发
		2、js的加载速度比图片的加载速度快，使用加载事件：onload

3、*****定时器：2种

       *1、周期性定时器：每过一段时间，会执行一次定时器中的操作
		开启：timer=setInterval(callback,间隔毫秒数)
		停止：clearInterval(timer);


	2、一次性定时器：等待一段时间，执行一次定时器之中的操作就停止了
		开启：timer=setTimeout(callback,等待毫秒数)
		停止：clearTimeout(timer);

	注意：一次性和周期性底层都是一样的，甚至可以相互转换，所以到底用哪个都可以

总结：

函数 和 循环 和 定时器 都能反复执行，区别？
	1、函数 - 用户触发绑定事件
	2、循环 - 一瞬间基本就结束了
	3、定时器 - 等一段时间做一次