Day.23 「更加认识 DOM，并初次了解事件绑定」 —— JavaScript DOM

我们之前在 HTML 篇章有介绍 DOM，是 Document Object Model 的缩写！
我们主要操作 DOM 来控制网页内容

Document 代表了整个 HTML 网页
Object 代表把网页中每个部分节点都转变成物件
Model 代表用来表示物件之间的关系，形成容易理解的树状图，也就是 DOM Tree

DOM tree

还记得它吧～其实属性也是 DOM Tree 的节点唷！

利用 DOM 取得文本内容

之前已经认识了网页标签，而现在我们要透过 JavaScript 来获取我们的网页节点！
假设我们要获取 button 内的文本内容

<button class="btn" id="btn">我是按钮</button>

获取文本内容

可以使用 textContent 来获取文本内容字的部分，同时也能依靠它来变更文本内容
可以使用 innerHTML 来获取文本内容，与 textContent 相比更方便常用，除了获取到文本内容的字，连文本内容的标签也会获取，同时也能依靠它来变更文本内容与标签

获取节点

而获取节点的方法也很多，我来讲几个比较常用的获取方法～

透过 id 来获取 document.getElementById("");，因为 id 单一的特性，所以只会获取到一个节点

const btn = document.getElementById("btn");
console.log( btn.innerHTML );  // "我是按钮"

透过元素节点来获取 document.getElementsByTagName(""); ，需注意因为元素节点是复数，所以会获得一个类似阵列的物件，并以索引值代表顺序

const btn = document.getElementsByTagName("button");
console.log( btn[0].innerHTML );  // "我是按钮"

透过 class 来获取 document.getElementsByClassName(""); ，需注意 class 选择器是复数，所以会获得一个类似阵列的物件，并以索引值代表顺序

const btn = document.getElementsByClassName("btn");
console.log( btn[0].innerHTML );  // "我是按钮"

与 jQuery 一样方便的节点选择器 document.querySelector("") 和 document.querySelectorAll("")，前面的是只会回传第一个，後面的是只要符合条件的都会回传，而这个回传的是比较像阵列的 NodeList。需注意 的是，它的条件可以是元素、id、class，所以跟 CSS 选择器一样，元素不需要前赘词，id 需要前赘词 #，class 需要前赘词 .

const btn = document.querySelectorAll("#btn");
console.log( btn.innerHTML );  // "我是按钮"
const btnAll = document.querySelectorAll(".btn");
console.log( btnAll[0].innerHTML );  // "我是按钮"

事件

事件就是使用者与浏览器互动的行为，如：点击按钮、滑鼠移动、控制视窗...等

我们可以事先在网页内写好 JavaScript 程序码，当这些事件触发时，就会执行程序码，这也就是 JavaScript 负责互动的部分！

同样的事件绑定也有很多种方法

写在 HTML 内

这方法其实不太好，因为 HTML 结构与 JavaScript 行为牵连在一起，会比较不方便维护，但还是认识一下！

<button id="btn" onclick="alert("你点到按钮了！");">我是按钮</button>
<!--  这样点击按钮就会跳出视窗显示「你点到按钮了！」  -->

绑定事件

这是常用的方法，结构与行为分开

<!-- HTML -->
<button id="btn">我是按钮</button>

获取到节点後绑定 onclick 点击事件

const btn = document.getElementById("btn");  // 获取 btn 节点
/*  绑定 onclick 事件  */
btn.onclick = function() {
  alert("你又点到按钮了！");
}

浏览器执行顺序

之前第二天有介绍 script 标签通常都放在最下面，而不会放在 head 标签内，是因为浏览器在执行的时候，是由上而下执行下来。

<html>
  <head>
    <title>Document</title>
    <script>
      const btn = document.getElementById("btn");
      console.log(btn);  // null
    </script>
  </head>
  <body>
    <button id="btn">我是按钮</button>
  </body>
</html>

这时 btn 获取到的物件节点就会回传 null，因为它找不到节点！

而写在下面 </body> 标签前时

<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <button id="btn">我是按钮</button>
    
    <script>
      const btn = document.getElementById("btn");
      console.log(btn);  // <button id="btn">我是按钮</button>
    </script>
  </body>
</html>

就能正常回传 <button id="btn">我是按钮</button> 节点了

onload 事件

如果我一定要写在上面呢？其实可以使用 onload 事件绑定，等**网页画面执行完（DOM 已经完成）**了，才执行程序码

<html>
  <head>
    <title>Document</title>
    
    <script>
      /*  事件绑定在 window 上  */
      window.onload = function(){
      
        const btn = document.getElementById("btn");
        console.log(btn);  // <button id="btn">我是按钮</button>
        
      }
    </script>
  </head>
  <body>
    <button id="btn">我是按钮</button>
  </body>
</html>