简单来说事件冒泡就是从深到浅从最里层标签的事件开始到最外层标签的事件

而事件捕获则相反是从最外层标签的事件开始到最里层标签的事件

  <div id="outer">
      <p id="inner">Click me!</p>
  </div>
  // 事件冒泡 p => div => body => html => document
  // 事件捕获 document => html => body => div => p

DOM

DOM 是JavaScript 操作网页的接口，全称为“文档对象模型”=> 将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作。

节点 DOM 的最小组成单位（构成网页的最基本的部分）

Document：整个文档树的顶层节点（文档节点）
DocumentType：doctype 标签（比如 < !DOCTYPE html > ）
Element：网页的各种HTML标签（比如 < body >、等）（元素节点）
Attr：网页元素的属性（比如class='right'）（属性节点）
Text：标签之间或标签包含的文本（文本节点）
Comment：注释
DocumentFragment：文档的片段

浏览器提供一个原生的节点对象Node，上面的七种节点都继承了Node。有一些共同的属性和方法。

节点/属性	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <button id="btn">我是一个按钮</button>
      <script>
        /**
        浏览器已经为我们提供文档节点对象， 这个对象是window 属性
        可以再页面中直接使用，文档节点代表的是整个网页
        */
        //console.log(document) 
        //获取到button这个对象
        var btn = document.getElementById("btn");
        console.log(btn) 
        //修改按钮的文本
        btn.innerHTML = "Button"
      </script>
    </body>
    </html>

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <!-- 我们可以再事件对应的属性中设置一些js代码，
          这样当事件被触发时，这些代码将会执行
          结构和行为耦合 不方便维护
    -->
    <!-- <button id="btn" ondblclick="alert('hello?')">我是一个按钮</button> -->
    <button id="btn" >我是一个按钮</button>
    <script>
      /**
       * 事件，就是用户和浏览器之间的交互行为
       * 比如：点击按钮，鼠标移动，关闭窗口
      */
      //获取按钮对象
      var btn = document.getElementById("btn")
      /***
       * 可以为按钮的而对应时间绑定处理函数的形式来响应事件
       * 这样当事件被触发时，其对应的函数将会被调用
       */
      //绑定一个单击事件
      btn.onclick = function(){
        alert("hello?")
      }
    </script>
  </body>
  </html>

获取元素节点

getElementById() => 通过id属性获取一个元素节点对象

getElementsByTagName() => 通过标签名获取一组元素节点对象

getElementsByName() => 通过name属性获取一组元素节点对象

获取元素节点的子节点

getElementsByTagName() => 返回当前节点的指定标签名后代节点

childNodes => 表示当前节点的所有子节点（包括元素节点、属性节点、文本节点）

children => 表示当前节点的所有子元素

firstChild => 表示当前节点的第一个子节点

lastChild => 表示当前节点的最后一个子节点

事件冒泡、事件捕获以及事件代理

DOM