JS中DOM元素的事件以及操作

dom的事件:
js的事件前缀都带on
* 键盘事件 表单事件 鼠标事件 浏览器事件 触屏事件。。。。
*onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按键事件)
* onfocus(获得焦点) onblur（失去焦点）
* onclick（单击） ondbclick onmouseleave(水平离开) onmouseout（离开） onmousemove（鼠标移动） onmouseenter（鼠标进入） onmouseover（鼠标悬停） onmousewheel(鼠标滚轮事件)
* window事件 onload（加载完成事件） onresize(窗口变化事件) onerror（报错事件） onscroll(滑动事件)
* touch（触屏） touchstart （开始触屏 ） touchmove（触屏移动） touchend(触屏结束)
* /
动态给dom元素添加事件
* /
var btn = document.getElementById(“btn”);
btn.onclick = function () {
console.log(1);
}
事件的监听
var btn2 = document.getElementById(“btn2”);
/ btn2.addEventListener(“click”,function (){
console.log(2);
});/
btn2.addEventListener(“click”, showbtn);
DOM元素的操作：
js 对象
* window
* document location history 内置对象
* document html标签 样式变化 数据显示之类的
* 1.先获取元素 如何获取dom（document object model）元素
* /
//js里面的获取方式
/
* getElementsByClassName 返回集合 htmlcollection 用法和数组一致
var btn=document.getElementsByClassName(“btnlist”);
console.log(btn[0]);
/*引用DOM对象如果是数组的话，取它的第一个
var btn=document.getElementsByClassName(“btnlist”)[0];
* getElementsByName 返回的是nodelist 类型 用法和数组一致
* */
var btn1=document.getElementsByName(“btninfo”);
console.log(btn1[0]);
/getElementById　 返回的是单个对象 直接使用/
var btn2=document.getElementById(“btn”);
console.log(btn2);
/getElementsByTagName 返回的是htmlcollection 集合 用法和数组一致/
var btn3=document.getElementsByTagName(“button”);
console.log(btn3[0]);

var btn4=document.querySelector(".btnlist");
console.log(btn4);
//返回的是集合
var btn5=document.querySelectorAll("#btn");
console.log(btn5);
/*可以直接获取body*/
console.log(document.body);