DOM-網路事件處理


Posted by stella572322 on 2020-09-25

DOM 文件物件模型

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

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

選取元素

  • 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 要放增加、刪減 className

增加、刪減 className

增加 : .classList.add("active")
移除 : .classList.remove("active")
開關 : .classList.toggle("active")
沒有此 class → 新增、有此 class → 移除
是否包含該 class : .classList.contains("active")在元素後面,不然 JS 無法對元素操作

修改 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') =>表示<button></button>

  • 加上屬性
    .setAttribute('data-value', num) =>表示<button data-value="num"></button>
  • 加上 className
    .classList.add('btn') =>表示 <button class="btn" data-value="num"></button>
  • 在 <目標物> 最後加上元素
    • 舉例:在 <div></div> 底下新增 <button></button> 元素
    • document.querySelector('div').appendChild(document.createElement('button')) => 表示 <div><button></button></div>
    • 舉例:在 <div></div> 底下新增 <button class="btn"></button> 元素
    • document.querySelector('div').appendChild(document.createElement('button').classList.add('btn')) => 表示 <div><button class="btn"></button></div>
  • 移除元素

    • 舉例:把 <div></div> 底下的 <button class="btn"></button> 元素移除
    • document.querySelector('div').removeChild(document.querySelector('.btn')) => 表示 <div><button class="btn"></button></div> 裡面這個 class="btn" 的元素就被移除掉了
  • 舉例:新增按鈕

    document.querySelector('.add__btn').addEventListener('click', () => {
    const btn = document.creatElement('button'); // 創造元素
    btn.setAttribute('data-value', num); // 加上屬性
    btn.classList.add('btn'); // 加上 className
    btn.innerText = num; // 加上內容 =>表示<button class="btn" data-value="num">num</button>
    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>
//重點:
事件監聽 Event Listener(滑鼠點、滾輪、鍵盤)
反應(變色、換頁、發API)
指令:
選到 節點(標籤) 加上 Listener 設定反應
`document.querySelector(節點).addEventListener(監聽, 反應)`

阻止預設動作 e.preventDefault()

  • 阻止瀏覽器上的特定元素在該事件預設的行為,以下是比較常用的情況:
    <form> 的 submit - 阻止送出表單
    <a> 的 click 事件 - 阻止跳網址
    <input> 的 keypress 事件 - 阻止輸入按鍵









Related Posts

如何使用 Python 實現 LRU Cache 快取置換機制

如何使用 Python 實現 LRU Cache 快取置換機制

[Week 1] 認識版本控制與初級 Git 時光機

[Week 1] 認識版本控制與初級 Git 時光機

什麼是 scope?

什麼是 scope?


Comments