JS Dom元素的获取 事件 this

一、DOM（文档对象模型）元素获取：

1. html / head / body元素的获取

 console.log(document);                      //获取的是 html元素 
 console.log(document.documentElement);      //获取的是 html元素 
 document.getElementsByTagName("html")[0];   //获取的是 html元素
 
 console.log(document.head);                 //获取的是 head元素
 document.getElementsByTagName("head")[0];   //获取的是 head元素
 
 console.log(document.body);                 //获取的是 body元素
 document.getElementsByTagName("body")[0];   //获取的是 body元素

设置窗口的背景色三种方式：

1. document.bgColor=“green”; // 通过 document 的属性设置
2. document.body.bgColor=“green”; // 通过 body 的属性设置
3. document.body.setAttribute(“bgColor”,“yellow”); // 通过 body 的属性设置
4. document.body.style.backgroundColor=“red”; // 通过 body 的样式设置

2. 元素动态获取的四种方式

  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(typeof(dom4));       //object  单个对象

注意：

1. 动态获取方法：指不仅可以获取到初始化页面的元素，也可以获取到通过JS代码动态添加到页面的元素。
2. 通过id获取到的是元素，除了id其余方式获取到的都是元素集合，要想获取某个元素需使用索引来获取，索引从0开始。
3. 元素集合不是数组，但是类似于数组，可以像数组一样的通过索引获取元素，但不能使用数组的方法。

3. 元素静态获取的两种方式

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

注意：

1. 静态获取方法：指只能获取到初始化页面的元素，不能获取通过代码动态添加到页面的元素。
2. 通过querySelector获取到的是初始化页面的第一个元素
3. 通过querySelectorAll 获取到的初始化页面的所有元素，即元素节点集合。要想获取某个元素需使用索引来获取，索引从0开始。

4. js代码写到元素前面，获取元素的方式
如果 js代码写到元素前面，获取元素的方式：把获取元素的代码写到页面加载完成事件的事件函数中。

<script>
    window.onload=function (){
        var btn = document.getElementById("btn");
        console.log(btn); 
    }
</script>
<button id="btn" >按钮</button>

二、事件：

1. 键盘事件：

onkeydown, onkeyup, onkeypress

2. 鼠标事件：

onclick 点击事件
onmouseover 鼠标悬停事件
onmouseout 鼠标离开事件
onmouseup 鼠标抬起事件
onmousedown 鼠标按下事件
onmousemove 鼠标移动事件
onmouseleave 鼠标离开事件
ondbclick 鼠标双击事件
oncontentmenu

3. 表单事件：

onfocus 获焦
onblur 失焦
onchange 内容改变
onselected

4. 浏览器事件：

onload 页面加载事件
onunload 页面关闭事件
onresize
onreload

5. 触屏事件：

ontouchstart
ontouchmove
ontouchend

6. onerror:图片加载失败事件

7. 事件在JS里的三种写法：
a. 直接在元素上绑定事件

   <button onclick="show()"></button>

1. 同类型事件只能绑定一次
2. 如果同类型事件多次，只有第一个生效，后面的不生效 。

b. 动态绑定事件

      //  1. 事件删除写在函数里，事件函数执行完删除事件
      var regest = document.querySelector("#btn");
        regest.onclick = reg1;

        function reg1() {
            console.log("注册");
            regest.onclick=null;   //事件删除
        }

      //  2. 事件删除写在函数外，相当于先添加事件，再删除事件，也就是没有添加事件。
      //     事件函数也不会执行。
      var regest = document.querySelector("#btn");
        regest.onclick = reg1;

        function reg1() {
            console.log("注册");
        }        
       regest.onclick=null;    //事件删除

1. 先获取元素，再绑定事件。
2. 同类型事件只能绑定一次。
3. 如果同类型事件多次，只有最后一个生效，前面的不生效 。

c. 事件的监听

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

注意：

1. 先获取元素，再添加事件监听，事件名称上不写 on。
2. 同类型事件可以绑定多次。
3. 一次只能删除一个事件，不能删除多个事件。删除事件时要把事件和事件函数两个参数都写上。

事件的冒泡、捕获和代理（只针对click事件）

一、事件的冒泡、捕获（只针对click事件）

1. 事件监听中的第三个参数为 true (捕获) / false(冒泡)，默认值为 false (冒泡)。
   捕获：事件(外->里)执行
   冒泡：事件(里->外)执行
2. 阻止事件冒泡：
   var uls = document.getElementsByTagName(“ul”);
   var lis= document.getElementsByTagName(“li”);
   uls[0].addEventListener(“click”, function (e) {
   console.log(1);
   });
   lis[0].addEventListener(“click”, function (e) {
   console.log(2);
   e.stopPropagation(); //阻止事件冒泡
   });

二、事件的委托（只针对click事件）
父元素把事件委托给子元素执行
var ele_ul=document.getElementsByTagName(“ul”)[0];
ele_ul.οnclick=function (e){
var target=e.target|| e.srcElement;
if(target.nodeName.toLowerCase()==“li”) // ul 通过e的 target把事件委托给了 li。节点名称都是大写。
{
console.log(1);
}
}

8. 事件的执行参数

1. 事件的执行参数：e / event
   e.stopPropagation(); 阻止事件冒泡
   e.preventDefault(); 阻止事件的默认行为
2. 点击事件的执行参数：
   event_ele.οnclick=function (e){
   //screenX/Y 鼠标相对整个屏幕的坐标
   //clientX/Y pageX/Y x/y 鼠标相对浏览器可视区的坐标
   //offsetX/Y 鼠标相对于对象的的坐标 ？？？可以这样说吗
   //srcElement target 点击的目标元素
   //timeStamp 事件发生的时间相对于浏览器加载完成时的时间间隔
   console.log(e);
   }
3. 键盘事件的执行参数：
   document.body.οnkeydοwn=function (){
   var e=event / window.event;
   //keyCode which 按键上的字母的ascii码
   //key code 按键上的字母
   //srcElement target 目标元素
   //timeStamp 时间间隔
   console.log(e);
   }

三、this

 // 1. 页面上的 this指 window对象
 console.log(this);
 
 // 2. 函数中的 this指 window对象
 function method(){
    console.log(this);
 }
 method();
 
 // 3. 事件中的 this指 执行事件的对象
 var info=document.getElementById("btninfo");
 info.onclick=function (){
    console.log(this);
 }

 // 4. 自定义对象中的 this指 该对象本身