dom数

dom数的获取方式

1.dom元素的获取
几种方式： 8种：
4种动态获取方式

 <button class="btn" name="but" id="btn_1">按钮</button>
<button class="btn">按钮2</button>
<button id="btninsert">动态添加</button>
<script>
    
    var dom1=document.getElementsByTagName("button");
    console.log(dom1[0]);//htmlcollection  集合类型   [index]  获取元素
    var dom2=document.getElementsByClassName("btn");
    console.log(dom2);//htmlcollection  集合类型   [index]  获取元素
    var dom3=document.getElementsByName("but");
    console.log(dom3);//NodeList  集合  [index]  获取元素
    var dom4=document.getElementById("btn_1");
    console.log(dom4);//object  单个对象

• 固定获取

初始化页面有几个元素 获取几个 后期动态添加的不能直接获取

var querybtn=document.querySelector(".btn");
        console.log(querybtn);
        var queryall=document.querySelectorAll(".btn");
        console.log(queryall);//nodelist集合  [index]  获取元素

提供了两个固定元素的获取

 // body
    console.log(document.body);
    //html
    console.log(document.documentElement)

添加事件

dom 元素的事件
事件都哪几类：
* 鼠标事件
* mousedown mouseup mouseover mousemove mouseleave mouseout mouseenter
* 键盘事件
* keydown keyup keypress
* 表单事件
* blur focus change
* 浏览器事件
* load error resize
* 触屏事件
* touchstart touchmove touchend
*
* js的事件在使用的时候要带on
1.dom元素直接绑定事件 在元素亨内直接添加事件 行内同类型事件只能绑定一次

2.直接动态绑定事件 （获取dom 在绑定事件）

3.事件的监听
监听事件 事件类型不带on

regest.addEventListener("click", method1);
function method1() {
    console.log("回调函数");
}
regest.addEventListener("click", method2);
function method2() {
    console.log("回调函数1");
    regest.removeEventListener("click", method2);
}

addEventListener 监听事件 第三个参数不写 默认是事件冒泡
// 第三个参数默认为false 冒泡 true 捕获

 var parbtn = document.getElementsByClassName("parbtn");
    for (var i = 0; i < parbtn.length; i++) {
        parbtn[i].addEventListener("click",function (){
            console.log(this);
        },true);
    }

• //事件的执行参数

 e  event
    var event_ele=document.getElementById("btnevent");
    event_ele.onclick=function (e){
        //鼠标执行参数
        //clientX/Y  pageX/Y  当前鼠标相对浏览器的坐标
        // srcElement   target   目标元素
        //触发的事件间隔timeStamp  ms
        console.log(e);
    }
    document.body.onkeydown=function (){
        var e=window.event;
        //keyCode  charCode which  ascii值
        //key  code  字母值
        //srcElement  target  目标元素
        //timeStamp  时间间隔
        console.log(e);