1.dom获取
<button id="but1" name="but0" class="but2">按钮</button>
通过id获取 (返回的是一个元素对象)
document.getElementById("but1");
通过选择器的方式获取 (返回的是一个元素对象)
document.querySelector("#but1");
通过name 获取 (返回的是一个数组)
document.getElementsByName("but0")[0];
通过class name 获取 (返回的是一个数组)
document.getElementsByClassName("but2")[0];
通过节点的名称 获取 (返回的是一个数组)
document.getElementsByTagName("button")[0];
2.操作dom元素对象（对象拥有 属性 事件（方法）
dom事件(js事件前缀都加on):
1.键盘事件： onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按键事件)
2.鼠标事件: onclick(鼠标单击) ondbclick(鼠标双击) onmouseleave(鼠标离开 水平) onmouseout(3d离开) onmousemove(鼠标移动) onmouseenter(鼠标进入) onmouseover(鼠标悬停) onmousewheel（鼠标滚轮）
3.window事件:onload(加载完成事件) onresize (窗口变化事件) onerror(报错事件) onsroll(浏览器滚动条)
4.触屏事件： touchstart(开始触屏) touchend(触屏结束) touchmove（触屏移动）
5.表单事件: onfocus(获取焦点) onblur(失去焦点)
dom事件操作:
js获取的都为行内样式
<button id="but">按钮</button>
<script>
var b=document.getElementById("but");
b.style.width="200px"; //js设置行内样式
console.log(b.style.width);// 获取行内样式
</script>
js获取非行内样式（通过window.getComputedStyle(obj).样式）
<style>
#but{
background-color:red;
height: 100px;
}
</style>
<button id="but">按钮</button>
<script>
var b=document.getElementById("but");
console.log(window.getComputedStyle(b).backgroundColor);//
</script>
绑定事件的3种常用方法
1.常规添加 直接在标签中添加
<button id="but1" onclick="m()">按钮</button>
<script>
function m() {
console.log(1);
}
</script>
2.动态给DOM元素添加事件
var b = document.getElementById("but1");
/*b.onclick=function(){
console.log(1);
}*/
b.onclick=m; //不写括号（）
function m(){
console.log(1);
}
3.事件监听
<button id="but1" >按钮</button>
<script>
var b = document.getElementById("but1");
/*b.addEventListener("click",m );
function m(){
console.log(1); }*/
b.addEventListener("click",function(){
console.log(2);});
</script>
4.事件冒泡
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）
<div id="div1">
<div id="div2"></div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(2);};
div1.onclick = function(){alert(1);}
结果：当点击子div 先弹出2 再触发父div 弹出 1
阻止事件冒泡
div2.onclick = function(e)
{
alert(2);
e.stopPropagation();
};
5.事件的执行对象 及事件的执行参数
执行对象：即button
执行参数（两种写法）
<button id="but1">按钮</button>
<script>
var b=document.getElementById("but1");
b.onmousemove=function(e){ //直接在函数中写e //var e=window.event（window可以省略）
console.log(e.pageX, e.pageY);//注意兼容性问题
}
</script>
6.事件委托
原理：利用冒泡的原理，把事件加到父级上，触发执行效果
<ul>
<li>点击1</li>
<li>点击2</li>
<li>点击3</li>
<li>点击4</li>
<li>点击5</li>
</ul>
var ul=document.getElementsByTagName("ul")[0];
ul.addEventListener("click", function(e){
alert(e.target.innerHTML);
});