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（滑鼠點、滾輪、鍵盤）
反應（變色、換頁、發ＡＰＩ）
指令：
選到 節點(標籤）　加上　Listener　設定反應
`document.querySelector(節點).addEventListener(監聽, 反應)`

阻止預設動作 e.preventDefault()

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

DOM-網路事件處理

DOM 文件物件模型

選取元素

增加、刪減 className

修改 text & HTML

新增元素

事件監聽 Event Listener

事件資訊 function(e)

表單事件處理 onSubmit

阻止預設動作 e.preventDefault()

stella572322

Related Posts

Comments

DOM 文件物件模型

選取元素

增加、刪減 className

修改 text & HTML

新增元素

事件監聽 Event Listener

事件資訊 function(e)

表單事件處理 onSubmit

阻止預設動作 e.preventDefault()

stella572322

Related Posts

[Canvas 筆記] 建立 canvas (未整理筆記)

簡明 Python Pandas 入門教學

旅程開始

Comments