操作dom元素

1.DOM元素的获取

var q1 = document.getElementById("id")
            document.getElementsByClassName("class")
            document.getElementsByName("name")
            // 返回对应tagName集合
            document.getElementsByTagName("tagName")
            // 返回匹配的第一个元素
            document.querySelector("h2")
            // 返回匹配的所有元素
            document.querySelectorAll("#btn")
            // 直接获取body
            document.body

2.修改属性

// 修改行内样式属性
            ele.style.styleName = styleValue
            console.log(ele.style.styleName)
            // js获取非行内样式(写在<stript>中的)属性
            console.log(window.getComputedStyle(btn1[0]).width);

3.获取属性

// 获取
            ele.getAttribute('attribute')
            // 设置
            ele.setAttribute('attribute')
            // 删除
            ele.removeAttribute('attribute')
            // 创建B，并添加到A的后面
            document.createElement(B)
            A.appendChild(B)

4.返回元素开始和结束标签的HTML内容

var qi = ele.innerHTML

5.返回元素的class属性

// 修改元素对应的clas名
            // 如果元素有2个以上的class属性值，那么获取这个元素的className助兴时，会把它的class属性都打印出来
            ele.className = "current"

6.事件

HTML事件和DOM鼠标事件

onload：页面加载时触发

onclick：鼠标点击时触发

onmouseover：鼠标滑过时触发

onmouseout：鼠标离开时触发

onfocus：获得焦点时触发

onblur：失去焦点时触发

onchange：域的内容改变时触发，一般用于select、checkout、radio

onsumbit：表单中的确认按钮被点击时触发，加在表单上而不是按钮上

onmousedown：鼠标在元素上按下触发

onmousemove：在鼠标指针移动时触发

onmouseup：在元素上松开鼠标时触发

键盘事件

onkeydown：键盘按下

onkeyup：键盘抬起

onkeypress：按键事件

window事件

onload：加载完成事件

onerror：报错事件

onresize：当调整浏览器窗口的大小时触发

onscroll：(滑动事件)拖动滚动条滚动时触发

事件的监听

//事件的监听
   //匿名函数
  /* var btn3=document.getElementById ("btn3");
    btn3.addEventListener("click",function (){
        console.log(3);
    });*/

当前点击的目标元素

  var btn = document.getElementById("btn");
    btn.onclick = function (e) {
 var target = e.target || e.srcElement;
        console.log(target);//目标元素
        }

事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。比如单击了页面中的div元素，那么这个click事件会逐级向上传播直到document对象

 

 事件捕获：思想是不太具体的节点应该更早接受到事件，最具体的节点应该最后接收到事件，用意在于事件到达预定目标之前捕获它

 

 DOM事件流：包括三个阶段：事件捕获阶段、处于目标阶段和时间冒泡阶段

 

 

addEventListener()和removeEventListener()：接收3个参数（要处理的事件名、作为事件处理程序的函数、布尔值），如果布尔值是true表示在捕获阶段调用事件处理程序，false表示在事件冒泡阶段调用事件处理程序