什么是 WEB API ？
答：就是一套专门用来操作网页的方法和属性。
通过document获取网页的某个元素
1.获取ID:
document.getElementById('id')；
通过id获取元素，找到了会返回这个元素，找不到会返回null。
除了id其它的获取方式都可以用某个元素点出里面的另一个元素。如 ul1.getElementsByClassName('four'); --- id 只能用document获取，因为在网页中id是唯一的，没有第二个。
2.获取类名:
document.getElementsByClassName('类名');
通过类名获取永远都会得到伪数组，在('类名')后面加[下标]可以取到对应下标的某个元素。
3.获取标签名：
document.getElementsByTagName('标签名')
用于获取标签。
4.获取name名：
document.getElementsByName('name名')
这个获取方法用的少
5.H5新增的俩个查找元素的方法：
document.querySelector();---永远只会找到第一个元素，返回的是对象
document.querySelectorAll();---永远得到为数组
找一个元素用querySelectot(); 找一堆用querySelectorAll(); ()里面写的要找的元素，css选择器怎么写()里就怎么写；如：要找id就querySelector('#id');各种选择器都可以写。
Web Api 事件
1.什么是事件？
答：当用户与web页面进行交互时解释器就会创建出相应的event对象来描述事件信息。
2.Event 事件对象
Event 表示的是事件的状态，如：键盘按键状态，鼠标移动位置等... 事件通常与某个函数相结合使用，函数不会在事件发生前被执行。
获取事件对象：---他有着兼容性问题，无法兼容ie8及以下版本，下面是兼容写法
function(e){e=e||window.event}；
2-1：事件对象里的三大坐标：
1.获取点击位置相对于屏幕左上角的坐标 e.screenX,e.screenY 。
2.获取的时点击位置相对于可视区域左上角的坐标 e.clientX,e.clientY。
3.获得相对于自身坐标x,y的方法：
计算方法：x=e.clientX - 盒子自身到可视区域的left。y=e.clientY - 盒子自身到可视区域的top
获取盒子到可视区域距离的方法：var rect = 盒子.getBoundingClinetRect(); var left = rect.left就是获取该元素左边相对屏幕左边的位置。同理还有bottom,top,right。
4.获得点击位置相对于页面左上角的坐标：
只能自己算：pageX=e.clientX+页面往左滚出去的距离。 pageY=eclientY+页面往上滚出去的距离。.
兼容写法： var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; 获取页面往左和往上滚出去的距离
3.事件句柄：
也叫事件处理函数，指用于响应某个事件而调用的函数。
常见的事件句柄有：
1-1鼠标点击事件：onclick。
1-2鼠标双击事件:ondblcick。
1-3鼠标移入事件:onmouseover少用，因为如果移入的是他的子元素也会触发事件 onmouseevent(常用)只会在鼠标移入当前元素的时候才会触发。
1-4鼠标移出事件:onmouseout(少用)同理onmouseleave(常用)。
1-5鼠标移动事件:onmousemove。
1-6鼠标按下事件:onmousedown。
1-7鼠标弹起事件:onmouseup。
1-8焦点事件:
onfocus 获得焦点
onblur 失去焦点。---当点击输入框时有光标在闪就是获得了焦点。离开就是失去焦点。
1-9滚动事件:，onscroll 滚动时触发。
1-10window对象的两个事件：
window.onloda 页面加载完毕时触发。 window.onunload:页面关闭时触发。
补充:window的两个方法：window.open('地址')--打开某个网页。window.close()关闭网页。
1-11实现拖拽以及拖拽有关的事件：
实现拖拽：先加鼠标按下事件，再按下事件里给页面(相对于哪里移动就给哪里加)加鼠标移动事件。 拖拽盒子还要考虑margin带来的影响，要减去margin。
跟拖拽有关的事件：ondragstart:拖拽开始
ondrag:拖拽中
ondragend:拖拽结束
H5新增的一个强行拖：加一个行内属性draggable='true'
1-12跟容器有关的事件：
oodragenter:有元素拖拽进容器时触发。
ondragleave:有元素拖拽离开容器时触发。
ondrop:有元素拖拽到我的范围内并松手时触发：ondrapover:主要是配合ondrop使用，一定要在over事件里调用事件对象，preventDefault()才能让ondrop触发。
1-13:关于键盘事件：
onkeyup:键盘弹起事件
onkeydown：键盘按下事件，任何按键都可以触发，获取按键不会区分大小写，统一当大写
onkeypress:键盘按下事件，只有内容按键可以触发，获取按键会区分大小写。
获取键盘按下的是哪个键兼容写法：var code = e.keyCode || e.charCode || e.which;
1-14:onresize:
当尺寸发生改变时就会触发的事件，可以模拟响应式布局。
4.处理事件的函数体:
就是指函数内产生效果的代码或方法，实现代码的效果逻辑。
addEventListener：添加事件
作用：主要用来添加一个事件，如果添加同名事件，不会覆盖，会依次执行，如果用on添加事件名相同的会被覆盖。IE8不支持。
写法：元素.addEventListener('事件名不要加on',function(){})
IE8支持添加同名事件的方法：attachEvent('事件名要加on',function(){})
如何移除事件：用什么方式添加就用什么方式删除：
addEventListener 就用 removeEventListener方法 如果添加事件时用的是匿名函数 那么无法用removeEventListener方法删除
用onclick 就用onclick=null方法删除
attachEvent只能用detachEvent来移除 他也不能移出匿名添加的事件
阻止事件默认行为:
e.preventDefault()
完整的事件触发过程 ：
一次完整的事件触发过程有三个阶段：1.捕获阶段(从上往下) 2.目标阶段(也叫找到事件源) 3.冒泡阶段(从下往上) 。 在事件里可以通过事件对象e.eventPhase来获取当前在哪个阶段。
事件捕获：
事件捕获是一种现象，它与事件冒泡相反，事件捕获是从window开始一级一级往下调用同名事件，直到真正触发事件的那个元素，事件捕获默认看不到。
要想看到事件捕获要用addEventListener 添加事件，并且写第三个参数写为true 不然其他默认都是事件冒泡。
写法：
元素.addEventListener('click',function( ){ },true)
目标阶段：
就是找到触发事件的那个元素。可以用e.target获取事件源(目标元素)。
兼容写法：
var target = e.target || e.srcElement;
事件冒泡：
事件冒泡是种现象，当一个元素的事件触发后会依次一级一级的往上调用父元素的同名事件直到window为止---事件冒泡默认存在。
好处：给父元素加事件就相当于给所有子元素都加了事件，(事件委托)。
影响：如果子元素和父元素有同名事件，而且子元素和父元素的同名事件的代码执行逻辑是相反的那么就会有影响。
阻止派发：
e.stopPropagation(); 用来阻止事件冒泡或捕获。
IE8里只有冒泡 没有捕获 IE8阻止冒泡的方法：e.cancelBubble = true;
事件里的this：
当前处理事件的是谁，那么this就是谁
换句话说，当前调用的是谁的事件，那么this就是谁
随机算数法：
parsenlnt(Math.random()*100+1) 生成0-100的随机数
parsenlnt--转整数。Math.random 生成0-1的随机数 100+1：他生成的是0-99 一百个数，所以为了保证到100 还要+1
禁用/启用：
行内属性：disabled 为true表示禁用，为false表示启用。在行内加上默认为true
类似的属性有：checked：指在页面加载时应该被预先选定的 input 元素。
selected：在select下拉栏中预先选择一个选项
克隆元素：
元素.cloneNode();//克隆一个元素出来 传：true代表深克隆 传false代表浅克隆，深克隆会克隆事件，浅克隆不会。
阻止a标签跳转的三个方法:
1.给它一个点击事件，里面写个return：false；
2.在行内href里写javascript:void(0)，意思是让js来执行，而js执行为0就是默认不执行
3.阻止他的默认行为：e.preventDefault。
H5新增储存:
1.本地存储localstorage:只要你不删除就会一直存在,只能存字符串，数值也会被他调用toString()方法转成字符串。储存形式(key,value)。
2.如果就是想存数组和对象怎么办？可以把他们转成JSON格式的字符串，这种字符串本质也是字符串，只不过表示数组也可以表示对象。var b =" {'key1':'value1','key2','value2'} "格式
方法：
1.保存数据:setltem localStorage.setltem('key','value')；
2.获取数据:getltem localStorage.getltem('key');
3.删除一个数据:removeltem localStorage.removeltem('key');
4.删除所有: clear localStorage.clear(); ()里不用传任何东西.
2.sessionstorage:可以短暂性的存储在浏览器里，关闭浏览器时就会删除。一般用于多页面传值，（网页注册，关闭不再提醒功能等）。用法与localStorage一样。
H5之前cookies：
cookie:储存数据，当用户访问某个网站时可以通过cookie来向访问者电脑存储数据。默认是临时储存，浏览器关闭时删除。
cookie的特点：1.储存限制一域名100个cookie 每组值大小为4k而 localStorage有5M。2.cookie的个数有限，不同浏览器存放的个数不同。3.cookie的数据可以设置名字。4.客户端、服务器端，都会请求服务器（头信息）页面间的cookie是共享的（同一个浏览器下的）。
优点：几乎所有浏览器都兼容 缺点:每次请求头信息都会带上大小限制为4k的信息主页面污染
两者的区别：
1.两者都是保存数据到用户浏览器中，储存容量 web storage要比cookie大。cookie相对的更适合保存很小的数据。
2.cookie的作用时与服务器交互 也就是cookie在浏览器和服务器之间来回传递，而web storage主要是为了本地存储，只会保存在本地。
3.web storage 有着setItem,getItem等方法，而cookie需要自己封装，（虽然网上也有，但是也不是很靠谱）。
4.保存的时间不同：cookie关闭浏览器就自动删除了，而localStorage只要不删除就会一直存在
两个好用的思想：
排他思想：让其它兄弟恢复默认，自己特殊。
//找到所有按钮：var btnList = document.getElementsByTagName('input');
//遍历所有按钮加点击事件 for(let i =0 i<btnList.length;i++){
//先把兄弟类名都恢复成默认//for(let j = 0 j<btnList.length;j++){
btnList[i].className='';
}
//只让自己特殊 this.className ='green';
}
JQuery也有类似的：
$("input").mouseevent(function () {
//让中间ul中的li对应索引值的显示，其他隐藏；
// alert($(this).index()); jquery方法获取索引值
var num = $(this).index();
//获取这个input下标让这个input有这个class就删掉没有就加上
$("input").eq(num).toggleClass('green')
});
开关思想：用于判断某一个值在不在里面的时候可以用:
//我要判断数字10在不在arr数组里面
var num = 10;
let arr = [55,100,200,444,102,890,1];
//立个flag（开关）假设10不在arr数组里
let flag = true;
for(let = i; i<arr.length; i++ ){
if(arr[i]==num){
console.log('在里面');
flag = false;
break;
}
}
if(flag==true){
//如果flag还为true，表示不在里面，我们假设成立，就直接log
console.log('不在里面')
//循环完了才知道num在不在里面
}
Web Api 操作属性的方式：
第一种：元素.属性的方式：修改时有带-的要把-去掉首字母大写。如：margin-top
如：修改img的src：img.src = '路径'。修改单标签按钮的文字：button.value ='文字'。
这种操作属性的方式只能获取行内的自带属性，无法访问自定义属性。什么是自定义属性呢？就是自己写的一些属性，如：shengao = 168, tizhong = 120 这种自己写的，用这种方式无法获取到。像img的src就是自带的属性，下面来介绍另一种操作属性的方法，它可以获取自定义属性。
第二种：getAttribute,setAttribute,removeAttribute
getAttribute:
可以获取行内的所有属性，不管是自带的还是自定义的，获取到的属性的值都是字符串。缺点：不能遍历。
获取方法：元素.getAttribute(’属性名‘)；
setAttribute:
可以修改所有的属性，不管是自带的还是自定义的。如果这个属性之前不存在就相当于加了一个新属性
设置方法：元素.setAttribute('属性名','属性值')；
removeAttribute:
可以删除属性，不管是自带的还是自定义的。
删除方法：元素.removeAttribute('属性名')；
补充,H5新增的操作属性方法：
讲解：H5里面推荐大家写自定义属性时，前面加一个data- 他们会统一保存在dataset属性里面，dataset 是一个对象，取值时用元素.dataset['属性名']获取 ，且要遵守驼峰命名法（带-的去掉-后面字母大写）。
getComputedStyle获取最终样式：
getComputedStyle可以获取某个元素的最终样式，不管是行内的还是内嵌的还是外联的。它返回的是个对象，这个对象包括了这个元素的所有属性。
用法：window.getComputeStyle(元素,'伪元素')；取出这个元素的所有属性。第二个参数不需要找可以不写，一般不用，代表找哪个伪元素。
要单独取出用getComputedStyle(box)['width']--代表取出box的宽。
这个方法有兼容问题：兼容方法：
if(window.getComputedStyle){ window.getComputedStyle(元素,null)['属性']}else{ 元素.currentStyle['属性']}
currentStyle:
用法:元素.currentStyle['width'];一样是获取元素的最终样式不过谷歌不支持，只支持IE8及之前
操作类的方法：
元素.className;//获取这个元素的所有类
元素.className = 值 //赋值什么这个元素的类就是什么
如果要添加一个类可以用+= 但是记得前面加空格 例: 元素.className +=" green"//加一个类
H5新增的操作类的方法：
classList 他是一个伪数组 他保存了元素身上所有的类。
元素.classList.add();添加一个类
元素.classList.remove();删除一个类
元素.classList.toggle();切换一个类
元素.classList.replace('参数1','参数2');替换一个类 参数1：被替换的类，参数2：要替换的新类
元素.classList.contains();判断有没有某个类，返回true/false
了解文档树：
文档：document，网页中所有的内容其实都在document里，所有的内容都是由document开支散叶而来的，像树一样，所以我们也叫他文档树，如果我要在body下设置个a标签，就相当于在这个body下面再挂一个新分支a。
了解节点：
网页中的所有内容都叫节点，属性，标签，文本，注释都叫内容，也称之为节点。
节点有三大属性：
nodeType：节点类型
nodeType:节点名字
nodeValue：节点值
元素节点的特征：
nodeType:1 作用：在拿到一个节点时，不知道他是什么，就可以判断他的nodeType是否为1，为1就代表标签
nodeName:大写的标签 作用：在拿到一个节点时，我确定他是一个标签，不知道他是哪个标签，就可以判断他的nodeName
nodeValue：null
其它的节点就不一一列举。
创建元素的三种方式：
1.document.write() 只能给body加内容，而且会覆盖原来的内容
2.xxx.innerHTML 给xxx添加内容也会覆盖原来内容，如果在原有基础上添加就用+=
3.innerText与innerHTML的取值与赋值：
取值：innerText：只能获取文本。 innerHTML:获取所有内容，包括标签
赋值：innerText:如果赋的是标签会把标签也当文本解析。innerHTML则会把标签解析出来
4.document.createElement(); 创建出一个标签，但是只存在与内存中，页面不显示，要显示要调用xxx.appendChild()代表加到xxx里面。
子元素与父元素：
获取父元素：xxx.parentNode:获取父元素。
操作子元素：
操作子元素都要调用父元素的方法：
删除：removeChild 删除子元素无法自行删除，要通过父元素才可以删除它
添加：appendChild 把新的元素，添加到xxx最后，添加已存在的相当于把元素从原来位置移动到了最后。
插入：insertBefore 可以指定插入到哪个子元素的前面。
替换:replaceChild('要替换的新元素'，被替换的元素)。
兄弟节点/元素：
上一个兄弟节点/元素：
previousSibling 找到上一个兄弟节点，包括文本，注释，标签。支持所有浏览器。
previousElementSibling 找到上一个兄弟元素，只会找到标签，IE8及之前不支持。
注意：如果有换行，他会把换行也当作一个节点，这可能是导致获取不到标签的原因。
下一个兄弟节点/元素：
nextSibling 找到上一个兄弟节点，包括文本，注释，标签。支持所有浏览器。
nextElementSibling 找到上一个兄弟元素，只会找到标签，IE8及之前不支持。
计时器：
setInterval('参数1','参数2'):
作用：每隔一段时间执行一段代码，参数1:要执行的代码可以是字符串也可以是函数。参数2：间隔时间，毫秒为单位。 计时器一旦开启，只要自己不写代码停止，它就会一直运行。
clearInterval(ID) :停止计时器：
停止计时器需要传入计时器的ID，ID怎么获取？在开启计时器的时候接受返回值(声明变量接收)；这个返回值就是计时器的ID。
计时器还有个坑点 点击N次会多N个定时器，怎么解决？在新的计时器开启时先把上次的计时器停掉就好了。
setTimeOut:计时器:
setTimeOut的用法是与setInterval一样的，只不过setTimeOut它只会执行一次，setTimeOut多用于让某一段代码可以延迟执行，参数1:要执行的代码，参数2：延迟执行的秒数。
OffSet家族：
offsetWidth:获取盒子的最终宽,(包括padding,boder)。
offsetHeight:获取盒子的最终高,(包括padding,boder)。
offsetLeft : 获取自身左外边框到定位父级的左内边框的距离(就是自身左外边框到父级的左内边框的距离)。
offaetTop：获取自身上外边框到定位父级的上内边框的距离(就是自身上外边框到父级的上内边框的距离)。
注意：以上几个元素只能获取不能修改，进行运算时他们得出的数值不带单位，所以还要记得带单位，以及offset后面跟的第一个字母要大写!
offsetParent:获取它所参照的定位父级元素，如果是绝对定位得到为null
scroll家族：
scrollWidth和scrollHeight：
获取内容的总宽度和总高度。(不包括边框，但包括padding)，只能获取不能修改。不带单位。
scrollLeft和scrollTop:
内容往左滚出去的距离和内容往上边滚出去的距离。它可以设置设置多少滚出去多少，不会超出最大的滚动距离。
获取页面滚出去的距离需要做兼容，获取盒子滚出去的距离不用。
//获得页面往上滚出去的距离var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
//获得页面往下滚出去的距离var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
client家族：
clientWidth和clientHeight
获取某个元素可视区域的宽和高
clientLeft和clientTop
获取的是左边框的宽度和上边框的宽度
client获取的值都不带单位，也不可以修改。写法：元素.clientWidth--(获取某个元素的可视区域的宽)。
兼容写法：
var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
