一、获取元素
1、获取CSS里的样式 getComputedStyle(div,null).width
2、通过接收CSS选择符（静态：不会随文档的操作而改变）
QuerySelectorAll();
QuerySelector();
3、类名获取
getElementsByClassName();
4、标签名获取
getElementsByTagName();
5、name属性获取
getElementsByName();
二、鼠标事件（10）
1、onmouse - (7)
over、enter （移入）
out、leave （移出）
down (按下）
up (抬起)
move （移动）
2、-（3）
onclick （点击）
ondblclick (双击)
oncontextmenu (右键)
两个移入、移出的区别：
enter、leave会将子级与父级做一个整体，父级移到子级，不会触发事件；
over、out会在鼠标从父级移到子级，会被触发（out父级，over子级）。
三、键盘事件（3）
1、只有聚焦的元素才能触发键盘事件。
2、默认 document为焦点。
div可以给键盘事件，不能聚焦，所以不会触发键盘事件。
3、事件 - onkey
onkeydown (键盘按下)
onkeypress (键盘按下)
onkeyup (键盘抬起)
onkeydown 和onkeypress的区别：
onkeydown: 任何按键都识别，不区分大小写
onkeypress : 只能识别数字、字母按键。区分大小写
//document: 文档，写div不会触发键盘事件
document.onkeydown = function(){
console.log("down键盘按下");
}
document.onkeypress = function(){
console.log("press键盘按下");
}
document.onkeyup = function(){
console.log("up键盘抬起");
}
// uname:text对应id;聚焦时才会触发下面键盘事件
document.getElementById("uName").onkeydown = function(){
console.log("down键盘按下");
}
// textar：文本域对应id;聚焦时才会触发下面键盘事件
document.getElementById("textar").onkeydown = function(){
console.log("down键盘按下");
}
四、表单事件(6)
聚焦、失焦、输入框内容变化、输入框内容变化、提交、重置
onfocus 、onblur、onchange(失焦变化)、oninput（即时变化）、onsubmit、onreset
五、window事件
window.onload 窗口加载完毕后才会执行
window.onresize 窗口尺寸发生变化后触发的事件
注：window.onload 与 document.write 不可同用：窗口加载完毕后会关闭文档流，
document.write会打开新的文档流，其内容会覆盖原文档流。 只能看到新文档流的内容。
六、移动端事件（手机）
1、三个重要事件
三个移动端事件
ontouchstart 按下手指
ontouchmove 移动手指
ontouchend 抬起手指
取消触摸的时候触发。比如来电、信息等，系统终止触摸事件的时候会触发，每个手机触发方式都不一样。
ontouchcancel
2、事件对象 ：常用的三个属性 （每个触屏事件都包含事件对象）
touches 屏幕上所有手指列表(可能有多个手指，是一个数组)
targetTouches 元素内所有手指列表
changedTouches 改变了的手指列表
3、阻止默认事件（2个）
teturn false;
evObj.returnValue = false;
4、手机端--动态加速度
DeviceMotionEvent 重力感应事件
ondevicemotion 动态重力加速度
accelerationIncludingGravity 包括了x/y/z三个方向的重力加速度的值
坐标系： x（水平向右），y（水平向下），z（沿屏幕向外）
if (window.DeviceMotionEvent){
redDiv.innerHTML = "支持";
// 动态重力加速度 ondevicemotion
// 重力加速度 accelerationIncludingGravity 包括了x/y/z三个方向的重力加速度
window.ondevicemotion = function(ev){
var evObj = window.event || ev;
var x = parseInt(evObj.accelerationIncludingGravity.x);
var y = parseInt(evObj.accelerationIncludingGravity.y);
var z = parseInt(evObj.accelerationIncludingGravity.z);
blueDiv.innerHTML = "x:" + x + "<br/>" + "y:" + y + "<br/>" + "z:" + z;
}
}else {
redDiv.innerHTML = "换个手机吧";
}
5、手机端 --检测设备方向
deviceorientation 检测设备方向
window.ondeviceorientation = function(ev){
var evObj = window.event || ev;
//设备沿z轴上的旋转角度，范围为0~360
var alpha = parseInt(evObj.alpha);
//设备在x轴上的旋转角度，范围为-180~180 描述的是设备由前向后旋转的情况
var beta = parseInt(evObj.beta);
//设备在y轴上的旋转角度，范围为-90~90。 描述的是设备由左向右旋转的情况
var gamma = parseInt(evObj.gamma);
blueDiv.innerHTML = "alpha:" + alpha + "<br/>" + "beta:" + beta + "<br/>" + "gamma" + gamma;
}
七、阻止系统默认事件（阻止默认事件）
一些事件，系统会有默认事件触发。比如右键弹出菜单，按了提交按钮跳转网页。
return false;
evObj.returnValue = false;
ev.preventDefault();
1、表单两种失焦区别
onchange 在文本框失焦的时候，才会触发。
oninput 文本框内容一改变，就立马触发（即时）。
2、onsubmit、onreset
点击提交、重置的时候，触发的是form表单，所以触发事件为form
var first = document.getElementById('first');
var uName = document.getElementById('uName');
uName.onfocus = function(){
console.log("focus聚焦");
}
uName.onblur = function(){
console.log("blur失去焦点");
}
// 在鼠标失焦是时候，输入框内容改变，触发事件
uName.onchange = function(){
console.log("change内容发生变化");
}
// 输入框内容发生变化时触发。即时
uName.oninput = function(){
console.log("输入了内容");
}
// document在表单事件中，不会触发事件
document.onfocus = function(){
console.log("document聚焦");
}
// 点击的是提交按钮，触发事件是form表单
// 点击提交，网页会自动刷新（默认事件），所以打印了又立马消失。
// first:form 对应的 id
first.onsubmit = function(){
console.log("用户提交了表单");
// 一些事件，系统会有默认事件触发。比如右键弹出菜单，按了提交按钮跳转网页。
// 阻止默认事件：
return false;
}
first.onreset = function(){
console.log("表单被重置了");
return false;
}