js中DOM元素的获取及操作

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);
     });