Day.23 「更加認識 DOM，並初次了解事件綁定」 —— JavaScript DOM

2021 iThome 鐵人賽

DAY 23

Modern Web

入門前端技能之旅系列第 23 篇

13th鐵人賽 javascript

Mao

團隊請付費解鎖團隊名稱

2021-10-02 14:44:23

1299 瀏覽

分享至

我們之前在 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>