Web API 总结

获取元素 :
document:文档对象.
element:标签节点.

id选择器

: 
getElementById('id值').

querySelector('#id值')
.
标签选择器

:  H5新增
getElementsByTagName('标签名') 
或 element.getElementsByTagName('标签名').
父元素必须 是指定的单个元素.  
返回值是固定的类型:伪数组.

querySelector('标签名')

.
类选择器

 :
getElementsByClassName('类名').
querySelector('.类名') 

.
事件基础
事件三要素:1.事件源 2.事件类型 3.事件处理程序.
添加事件过程:
1.获取事件源(获取元素).2.注册事件(绑定事件).3.添加事件处理程序.
事件触发语法：
element.on事件名=function(){
事件处理程序}
鼠标点击:onclick.
改变元素内容:
1.element.innerText=改变的内容;不识别html标签
2.element.innerHTML=改变的内容;识别html标签文本.
获得焦点 onfocus  失去焦点 onblur .
常用的操作元素属性:
innerText, innerHTML, src, title, href, id, alt,name ,value, type ,className, style, backgroud-color,disabled,display, 

element.style行内样式操作.获得修改元素样式.
element.className 类名样式操作.修改元素的className更改元素样式,会覆盖原先的类名,适合样式较多或功能复杂的情况.
操作元素:
1.操作元素内容:innerText, innerHTML.
2.操作常见元素属性:src, href, title, alt等.
3.操作表单元素属性:type, value, disabled.
4.操作元素样式属性:element.style, className.

字符串,伪数组, 数组: 可以使用length属性,
排他思想:
1.所有元素清除样式.
2.给当前元素设置样式.
鼠标经过:onmouseover.
鼠标离开:onmouseout.
自定义属性:
获取元素的属性:
1.element.属性.   获取内置属性(元素自带属性).
2.element.getAttribute('属性').
设置属性值:
1.element.属性='属性值'.   设置内置属性值.
2.element.setAttribute('属性','属性值')   主要针对于自定义属性.
移出属性:
element.removeAttribute(属性.)
H5新增自定义属性:只能获取以date-开头的,
element.dataset.index
节点操作:
nodeType:节点类型.
nodeName:节点名称.
nodeValue:节点值.
找父级节点:element.parentNode,
子节点:1.element.childNodes 所有子节点包含元素节点和文本节点
2.element.children 获取所有子元素的节点,
3.element.firstElementChild 获取起一个子元素
element.lastElementChild 获取最后一个子元素
element.children[],无兼容问题.

兄弟节点:
1.1 element.nextSibling :得到下一个兄弟节点包括元素节点,文本节点.
1.2 element.previousSibling, 得到上一个兄弟节点
2.1 element.nextElementSibling: 得到下一个元素节点
2.2 element.previousElementSibling: 得到上一个兄弟节点.

创建节点:document.createElement('元素名'),
添加节点:
1.添加到最后 element.appendChild(child),
2.指定元素前:element.insertBefore(child,指定元素),
删除节点:element.removeChild(child),
复制节点:element.cloneNode(),括号为空或false只复制标签不复制内容,为true则标签和内容都拷贝,
onblur. onfocus. 没有冒泡,

事件对象的属性与方法;
1. e.target:返回的是触发事件的对象(元素).  this 指向的是绑定事件的对象(元素).
2. e.type: 返回事件类型.
3. e.preventDefault: 阻止默认行为(事件).
4. e.stopPropagation:阻止冒泡.

事件委托:
原理:不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。当触发子元素的事件时，通过冒泡，事件传递给父亲，父亲身上绑定有事件处理程序，进而触发.
鼠标事件对象: MouseEvent.
e.client:返回鼠标相对于浏览器窗口可视区的坐标.
e.page: 返回鼠标相对于文档页面的坐标.
常用的键盘事件:
1. onkeyup: 按键弹起时触发.
2. onkeydown: 按键按下时触发.
3. onkeypress: 按键按下时触发.不识别功能键.
4. keyCode: 返回该键的ASCll值.
BOM
窗口加载事件:
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件.
pageshow: 重新加载页面重新加载的事件.
document.addEventListener('DOMContentLoaded',function(){}),事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等.
调整窗口大小事件:
window.onresize: 调整窗口大小加载事件.

定时器:
1. window.setTimeout(调用函数,延时时间(单位毫秒)); window在调用的时候可以省略.
清除定时器: 
window.clearTimeout(setTimeoutID)
callback:回调,
2. window.setInterval(调用函数,延时时间(单位毫秒)),重复调用.
清除定时器:
clearInterval(setIntervalID),
全局作用域或者普通函数中this指向全局对象window
在方法中谁调用指向谁.
在构造函数中指向实例对象.
URL:统一资源定位符
location.href: 获取或者设置URL,   location.assign()跟href一样,记录历史.   location.replace(): 不记录历史.
location.search: 返回参数,
location.host:返回主机(域名),
location.pathname: 返回路径,
location.reload(true): 强制刷新.
history对象
back():后退.
forward()前进.
go(1或-1):若是1前进一个页面,若是-1则后退.

元素偏移量offset系列
element.offsetTop: 返回元素相对带有定位的父元素上方的偏移.
element.offsetLeft: 返回元素相对带有定位的父元素左边框的偏移.
element.offsetWidth: 返回自身包括padding.边框.内容区的宽度.
element.offsetHeight:  返回自身包括padding.边框.内容区的高度.
element.offsetParent: 返回该元素带有定位的父级元素.如无返回body,
offset 可以得到任意样式表中的样式值,
style 只能得到行内样式表中的样式值
.要给元素更改值，则需要用style改变
.

element.clientTop:返回元素上边框的大小.
element.clientLeft:返回元素左边框的大小.
element.clientHight:返回自身包括padding.内容区的高度不包含边框.
element.clientWidth:返回自身包括padding.内容区的宽度不包含边框.

立即执行函数:不需要调用,立即执行.
写法:1. (function(){})(), 
2.(function(){}()).

scroll系列
scroll事件.
element.scrollTop:返回被卷上去的上侧距离.
element.scrollLeft:返回被卷上去的左侧距离.
element.scrollHight:返回自身实际的宽度,不包括边框.
element.scrollWidth:返回自身实际的高度,不包括边框.
页面被卷去的头部:可以通过window.pageYOffset获得,如果是被卷去的是左侧window.pageXOffset.

offset系列经常用于获得元素位置 offsetLeft.  offsetTop.
client经常获取元素大小 clientWidth. clientHeight.
scroll经常用于获取滚动距离 scrollTop.  scrollLeft.
mouseenter在父子盒子之间来回切换，不会重复触发mouseenter事件。只有第一次进入父盒子区域（父盒子区域，和子盒子区域），才会触发。

mouseover在父子盒子之间来回切换，会重复触发mouseover事件。

动画
原理:通过定时器setInterval()不断移动盒子的距离.
注:必须有定位.才能用element.style.left
动画函数封装obj目标对象 targeet目标位置.
缓动动画公式:(目标值-现在的位置)/10 ,
若前面已有点击事件,则自动播放:对象.click(), 
window.scrll(x,y):滚动至窗口指定位置,

移动端
触屏事件:touch
touchstart:触摸时触发,
touchmove:触摸时滑动时,
touchend:触摸时移开.
touches:正在触摸屏幕的手指列表,
targetTouches:正在触摸DOM元素的手指列表,
changesTouches:手指状态改变的列表,
transitionend:过渡结束之后,再去判断,监听过渡完成的事件,
移动端:
classlist: 返回元素的类名,
element.classlist.add('类名'): 添加类名,
element.classlist.remove('类名'): 删除类名,
element.classlist.toggle('类名'): 清除或添加类名,

本地存储,关闭浏览器之前存在.
window.sessionStorage.setItem('key',value): 存储数据
window.sessionStorage.getItem('key'): 获取数据
window.sessionStorage.removeItem('key'): 删除数据
window.sessionStorage.clear():清除所有数据,

本地存储,永久存在:
wwindow.localStorage.setItem('key',value): 存储数据
window.localStorage.getItem('key'): 获取数据
window.localStorage.removeItem('key'): 删除数据
window.localStorage.clear():清除所有数据,

本地存储localStorage里面只能存储字符串格式,因此需要把对象转换为字符串  JSON.stringify(对象);

获取本地存储的数据,需要把里面的字符串数据转换为对象格式  JSON.parse(对象) ,
change:改变事件