webAPI概览

API概览

1.获取属性值
element.属性 获取属性值 （主要用于元素自带的属性）
element.getAttribute(‘属性’); （主要用于自定义的属性）
设置属性元素值
1.element.属性=‘值’
2.element.setAttribute(‘属性’,‘值’)
移除属性 removeAttribute(属性)
例：div.removeAttribute(‘index’);

设置H5自定义属性
1.规定自定义属性data-开头作为属性名并赋值
2.H5新增获得自定义属性的方法 div.dataset.属性名
dataset是一个集合里面存放了所有data开头的自定义属性，如果自定义属性里面有多个-连接的单词，获取的 时候采用驼峰命名法。

2.节点
1.父节点 parentNode
得到离元素最近的父节点，找不到则为NULL
2.子节点 childNode（包含元素节点、文本节点）想只获取元素节点需再次处理，故一般不提倡
解决办法：children 获取所有子元素节点 ； parentNode.children[0]获取第一个子元素节点，以此类推；最后一个parentNode.children[parentNode.length-1].
3.兄弟节点
node.nextElementSibling返回当前元素的下一个元素节点，找不到返回null
node.previousElementSibling返回上一个兄弟元素节点
以上两种ie9以上支持，node.nextSibling却没有兼容性问题
4.创建元素节点
var li =document.createElement(‘li’);
5.添加元素节点 node.appendChild(child) node父级 child子级 后面追加
6.添加元素节点放在某个元素前面
node.insertBefore(child,指定元素位置);
7.删除节点 node.removeChild(child)或 node.removeChild(node.children[0])
8.克隆节点
node.cloneNode();括号为空或者里面为false浅拷贝，只复制标签而不复制里面的内容
node.cloneNode(true)；括号内为true则为深拷贝，复制标签页复制里面的内容

3.事件高级
传统的事件为唯一事件，只能执行一个函数，这个可以按顺序执行多个函数
1.addEventListener事件监听方式，这是一个方法
例：btn.addEventListener(‘click’,function(){})
注：里面的事件类型是字符串，必定加引号，而且不带on
同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
2.删除事件
传统：eventTarget.οnclick=null;
方法监听:eventTarget.removeEventListener(type,listener[,useCapture]);
例：divs[1].removeEventListener(‘click’,fn);
3.eventTarget.detachEvent(eventNameWithOn,callback);
例：divs[2].detachEvent(‘onclick’,fn1);
以上三条程序都在函数里面

4.DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这就是DOM事件流。
1.JS只执行或捕获冒泡的一个阶段
2.onclick和attachEven只能得到冒泡阶段

5.事件对象
事件发生后与事件相关的所有信息数据的集合都放到该对象里面，其中包含了很多的属性和方法。

常见事件对象的方法和属性
e.target返回触发事件的对象（元素） this返回绑定事件的对象（元素）
通俗解释：前者是点击了那个元素就返回那个元素，后者是哪个元素绑定了这个事件就返回哪个元素

e.target	返回触发事件的对象 标准（e.srcElement限ie678非标准)
e.type	返回事件类型 如click mouseover不带on
e.preventDefault()	阻止默认事件（默认行为）如不让跳转 ( 非标准e.returnValue 限ie678)

阻止冒泡
e.stopPropagation()
e.cancelBubble=true (非标准）

6.事件委托
事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点

7.常见的鼠标事件
contextmenu鼠标右键菜单
selectstart选中文字开始

鼠标事件对象	说明
e.clientX(e.clientY)	返回鼠标相对于浏览器窗口可视区的X（Y）坐标
e.pageX(e.pageY)	返回鼠标相对于文档页面的X（Y）坐标 ie9+支持
e.screenX(e.screenY)	返回鼠标相对于电脑屏幕的X（Y）坐标

8.键盘事件
onkeyup按键松开时触发
onkeydown、onkeypress按键按下时触发（区别：后者不识别功能键，如shift、ctrl）
注：此三者使用事件侦听addEventListener时不需要加on

keyCode属性：返回该键的ASCLL码
三个键盘事件中只有onkeypress能区别大小写返回相应的ascll码

9.BOM
注：window下的特殊属性window.name
window.onload传统事件注册方式只能写一次，若有多个当以后者居之，若使用window.addEventListener则没有限制

对比：DOMContentLoaded等DOM加载完毕就可以执行，比load快，适用于图片大的网站。

调整窗口大小事件
window.onresize调整窗口大小加载事件，窗口像素一旦变化即触发的函数，经常用之处理响应式布局
window.innerWidth获取当前屏幕宽度

window.setTimeout(调用函数，延迟时间);
window可省略；延迟时间单位毫秒，省略默认为0
调用函数可以直接写函数也可以写函数名。

window.clearTimeout(timeout ID即定时器标识符)
停止setTimeout()定时器。

两种定时器的区别：
1.setTimeout:延迟时间到就去调用指定函数
2.setInterval每间隔延迟时间调用一次该函数，多次重复调用

window.clearInterval(intervalID);clearInterval()方法取消了先前通过调用setInterval()建立的定时器

关于js的执行机制
js本事单线程语言，但利用多核CPU的计算机能力，js出现了同步和异步
所谓异步简单描述就是：在执行时间较长的任务过程中同时执行下一个任务
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈，开始执行

10元素偏移量offset
offset系列属性可以动态得到元素的位置（偏移）大小等。
offset与style的区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式值
得到的参数没有单位	有单位
offsetWidth包含padding+border+width	style.width不包含
系列属性只是可读	可读可写
想获取元素大小位置，建议offset	修改元素值用style

不常用的client系列
立即执行函数
(function(){})()或者(function(){}())
主要作用创建了一个独立的作用域，避免了 命名冲突问题

pageshow
火狐有“往返缓存”，页面点击后退以后不会进行刷新，pageshow事件是在页面显示时触发，无论是否进行页面缓存；在重新加载页面中pageshow会在load事件后触发。
persisted属性，判断对象是否是缓存中取的。

scroll系列属性
scroll事件，即一滚动滚动条就会触发的事件，使用scroll相关属性可以动态得到该元素的大小、滚动距离等

注意：页面的滚动距离使用window.pageXOffset、window.pageYOffset

三大系列用法总结

offset系列用于获取元素位置	offsetLeft、offset Top
client用于获取元素大小	client Width、client Height
scroll用于获取滚动距离	scrollTop、scroll Left

mouseenter鼠标事件

• 当鼠标移动到对应元素上时就会触发mouseenter事件
• mouseover鼠标经过自身盒子时会触发，经过子盒子还会触发。而mouseenter只会经过自身盒子触发
• 因为mouseenter不会冒泡
• 与mouseenter搭配的鼠标离开mouseleave同样不会冒泡

window.scroll(x,y)页面滚动到x和y相应的位置，实现页面位置跳转的功能

移动端特效
移动端基本事件
触摸元素 touchstart
移动手指 touchmove
离开手指 touchend
示例：.addEventListener(‘touchstart’, function(e) {}

触摸事件对象（TouchEvent）
Touchevent是描述手指在触摸屏的状态变化的事件。
实际开发以targetTouchs的使用为主

console.log(e.targetTouches[0]);
// targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
e.preventDefault(); // 阻止屏幕滚动的默认行为

移动端实现轮播用css的transition过度属性，切换使用transform，
过度完成使用transitionend事件监听

// classList 返回元素的类名
var div = document.querySelector(‘div’);
// console.log(div.classList[1]);
// 1. 添加类名 是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
div.classList.add(‘three’);
// 2. 删除类名
div.classList.remove('one
// 3. 切换类,存在则删除，不存在则添加
var btn = document.querySelector(‘button’);
btn.addEventListener(‘click’, function() {
document.body.classList.toggle(‘bg’);
}

sessionstorage本地存储
存储在当前页面，刷新也不会被清除
sessionStorage.setItem(‘填自定义存储的变量名’, 被存储的变量);
sessionStorage.getItem(‘uname’)获取存储的数据
sessionStorage.removeItem(‘uname’);删除存储的数据
sessionStorage.clear();清除所有sessionStorage数据
localStorage浏览器存储
相比于前者，该存储是存储在浏览器中，关闭浏览器也会存在，只要用的是同一个浏览器
localStorage.setItem(‘username’, val)
localStorage.getItem(‘username’)
localStorage.removeItem(‘username’)
localStorage.clear();
解释同上