[ 筆記 ] DOM - 網路事件處理


Posted by krebikshaw on 2020-07-16

JavaScript 的引入

  • 利用標籤插入在 HTML 中任何位置
    • <script>...</script>
  • 建立一個 .js 檔,再利用指令引用進 HTML
    • <script src="./main.js"></script>

JavaScript 與瀏覽器的溝通

  • 介面:如何改變介面
  • 事件:如何監聽事件並作出反應
  • 資料:如何跟伺服器交換資料

DOM 文件物件模型

  • DOM 全名為 Document Object Model
  • 就是把 HTML 的標記( Document ) 轉換成物件( Object )。

JavaScript 可以操作物件,但不能直接操作頁面上的標籤,所以 DOM 就是瀏覽器幫 object 轉換成 => HTML 對應的標記,進而讓 JS 可以改變到頁面的元素。也就是說「DOM 就是 JS 跟 HTML 溝通的橋樑。」

理論上能操控 object 的程式語言都可以透過 DOM 把 object 轉換成 => HTML 對應的標記,但是因為瀏覽器只能看得懂 JavaScript,所以前端的語言就只有這個選項囉。

選取元素

  • Tag
    • document.getElementsByTagName("header");
  • Class Name
    • document.getElementsByClassName("cotainerBody");
  • ID ( 注意:Element 沒有 s,因為 ID 元素只能有一個 )
    • document.getElementById("container");
  • CSS 選擇器
    • document.querySelector("#header p");
      • 可以選取到 #header 底下的第一個 p
    • document.querySelectorAll("#header p");
      • 可以選取到 #header 底下所有的 p
    • 就像寫 CSS 來選擇元素。
    • id 用 #、class 用 .、 tag 用 <tag 本身>、關係選擇器 > + ~
    • 但 querySelector 只會回傳第一個元素,如果想要選取到所有匹配到的元素,可以改用 querySelectorAll。
  • element.closest() 選取最靠近的父層元素

  • 注意:script 要放在元素後面,不然 JS 無法對元素操作

改變 CSS

  • 先在 css 上對 class 設定好狀態
.checked {
  background: yellow;
}
  • 待事件觸發時,再幫元素加上該狀態的 class
element.classList.add('checked')

修改 className

  • 增加 : .classList.add("active")
  • 移除 : .classList.remove("active")
  • 開關 : .classList.toggle("active")
    • 沒有此 class → 新增、有此 class → 移除
  • 檢查是否包含該 class : .classList.contains("active")

修改 text & HTML

.innerText

  • 只抓取標籤裡的內容、不包含標籤本身
  • 只能寫入純文字
  • 將要設定的值「賦值」到 innerText
    • element.innerText = "content"

.innerHTML

  • 抓取標籤裡的所有內容、包含子標籤 ( 如果裡面沒有子標籤,抓取內容就跟 innerText 一樣 )
  • 跟 innerText 不同的是,可以寫入標籤
    • element.innerHTML = "<div>content</div>"

.outerHTML

  • 改變標籤內容、包括標籤本身
  • element.outerHTML = "<new-element>...<div>content</div>...<new-element>"

新增元素

  • 注意:要新增 or 刪除元素,要先找到它的父層,再利用 appendChild() or removeChild() 處理

  • 創造元素

    • document.createElement('button')
  • 加上屬性
    • .setAttribute('data-value', num)
  • 加上 className
    • .classList.add('btn')
  • 在 <目標物> 最後加上元素
    • .appendChild(<要加上去的元素>)
  • 移除元素

    • .removeChild(<要加上去的元素>)
  • 舉例:新增按鈕

document.querySelector('.add__btn').addEventListener('click', () => {
  const btn = document.creatElement('button'); // 創造元素
  btn.setAttribute('data-value', num); // 加上屬性
  btn.classList.add('btn'); // 加上 className
  btn.innerText = num; // 加上內容
  document.querySelector('.outer').appendChild(btn); // 把新元素放上去
})

事件監聽 Event Listener

簡單來說就是指定畫面的某一元素,我們會監測當此元素發生 「什麼事」 、會再進行後續的處理,而我們可以要偵測指定「 事件 」是什麼、當它發生的這動作稱為 「觸發」。

  • 在 element 綁定一個 click 事件
  • 當滑鼠點擊到 element ,即觸發了element 的 click 事件,會進行 callback function
element.addEventListener('click', function(){
    // ... callback => 當按鈕點擊時、要做的動作
});

事件資訊 function(e)

  • onClick 事件發生的同時,瀏覽器會記下當下的數據(點選的位置, 點選的標籤, 相關內容),我們可以藉由程式碼來撈取我們所需要的訊息

  • event 資訊會放在 callback function 裡面的第一個參數,通常都是取名 event 或簡寫 e,可以當成是一個「 物件 」,裡面有各種此事件的參數值,例如:

  • click 點擊
    • e.target 點擊到的元素
    • e.screenX 滑鼠離視窗左邊的距離
    • e.screenY 滑鼠離視窗上邊的距離
    • 若是想拿到我們點擊的 element 屬性
      • e.target.getAttribute('data-value')
  • keydown 按下按鍵
    • e.key 按鍵號碼

表單事件處理 onSubmit

  • 當表單 form 中的 submit 按鈕 click 的時候,會有個預設行為,就是「 送出表單 」,預設是 GET 方法,並把參數帶入原網址送出,而 submit 事件是在表單送出前會觸發,用處是可以拿來驗證表單內容。

  • 例如 密碼 跟 確認密碼 輸入的值不一樣的話,可以用 e.preventDefault() 來阻止表單送出。

<body>
  <form class="form" action="">
    密碼:<input type="password" name="password1">
    確認密碼:<input type="password" name="password2">
    <button type="submit">送出表單</button>
  </form>
  <script>
    const form = document.querySelector('.form');
    form.addEventListener('submit', function(e){
      const pw1 = document.querySelector('input[name="password1"]');
      const pw2 = document.querySelector('input[name="password2"]');
      if (pw1.value !== pw2.value) e.preventDefault(); // 密碼不同、不送出表單
    });
  </script>
</body>

阻止預設動作 e.preventDefault()

阻止瀏覽器上的特定元素在該事件預設的行為,以下是比較常用的情況:

  • <form> 的 submit - 阻止送出表單
  • <a> 的 click 事件 - 阻止跳網址
  • <input> 的 keypress 事件 - 阻止輸入按鍵

#DOM







Related Posts

Nodemon工具 使用方法

Nodemon工具 使用方法

【隨堂筆記】作業系統與檔案系統基礎

【隨堂筆記】作業系統與檔案系統基礎

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段四:個人專案~Sprint 5)

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段四:個人專案~Sprint 5)


Comments