>若有任何疑問請至 Discord「作業討論」頻道討論

# DOM 操作
## 本章節我們要學什麼？
熟練了使用 Javascript 來創造與操作資料後，接著就可以開始將資料與網頁互動。在本次章節會循序漸進考驗同學選取、修改、監聽 DOM 頁面的能力。
部分題目下方附有 keywords，表示該題目運用到課堂外的語法或技巧，同學可依照 keywords 搜尋了解概念。

::: info
這份 HackMD 還是保持測驗為目的，因此並不會有太多教學的篇幅。
如果遇到問題可以參考助教在出題前整理的筆記，或許會有幫助😎：

* [為什麼你應該要使用資料屬性 data-*](https://www.webdong.dev/post/why-you-should-use-data-attributes/)

為了專注在練習 Javascript，題目都會提供 HTML 架構。不過還是建議同學從頭練習開發整套網頁元件，熟悉與讓思緒在架構、樣式、邏輯間轉換，找到對自己最合適的開發方式。

:::success
助教有特地為這個主題做了懶人包，方法無須背誦，要用到時多查閱文檔即可。
<div style="display: flex; justify-content: center; gap: 1rem">
<img width="300" src="https://i.imgur.com/RrS6WV4.jpg">
<img width="300" src="https://i.imgur.com/uwRBkET.jpg">
</div>
:::

## 題目一：選取 DOM
使用以下註解提到的方式來選取 DOM 元件，再打印至終端中。

<div data-target id="target" class="target">選我01</div>
<div data-target class="target">選我02</div>

// Todo 待完成
// 01. 使用 getElementById + getAttribute("id") 來獲取 01 的 id 內容
console.log(...)
// 02. 使用 getElementsByClassName 來獲取一個 HTMLCollection
console.log(...)
// 03. 使用 querySelector 來獲取一個 Element
console.log(...)
// 04. 使用 querySelectorAll 來獲取一個 NodeList
console.log(...)
// 05. 使用 nextSibling 來獲取一個 Node
console.log(...)

// Output 輸出
// "target"
// HTMLCollection { 0: div#target.target, length: 1, … }
// <div id="target" class="target" data-target="">
// NodeList [ div#target.target, div ]
// #text "\n"

## 題目二：修改 DOM
接續第一題，請創造一個 selectMe 變數並存放內文字為"選我01"的元素，並依照以下的要求使用 DOM API 修改其屬性：
* 修改文字為紅色 (inline-style)
* 新增 "hello" 的 class 屬性
* 修改文字內容為 "被選了01"

//Todo 待修改
const selectMe = "..."

✨keywords：Element.style、Element.classList

## 題目三：監聽 DOM
接續第二題，請為該元素(選我01)設置事件監聽，當被「點擊」時做出以下反應：
* 背景改為黃色
* 內文字改為 "已被點擊！"
* 再點擊一下回復原本狀態(背景與內容文字回復原樣)。

## 題目四：創造、插入 DOM
請製作一個按鈕，當點擊時會在 HTML 文件中新增以下內容：

// Todo 待編輯
<button>新增你好世界</button>

// Document Added 新增
<p>你好世界</p>

✨keywords：createElement()、appendChild()

## 題目五：監聽表單
請監聽以下表單，當 ```submit``` 事件觸發時阻止預設事件發生，並打印事件至終端。

  <form>
    <input name="user" type="input" required>
    <input type="submit" value="獲取資料">
  </form>

✨keywords：submit event

## 題目六：加減計數器
請製作一個計數器，具有增加、減少、重設按鈕以及顯示目前數字的功能。

<div>
    <div>0</div> // 目前數字
    <ul>
      <li><button>+1</button></li> // 按按鈕 +1
      <li><button>Reset</button></li> // 按按鈕重設為 0
      <li><button>-1</button></li> // 按按鈕 -1
    </ul>
</div>


## 題目七：加減計數器(進階)
接續題目六，請製作並監聽一個表單，讓用戶可以修改一次增加與減少的數量。

<form>
  <input type="number" min="0" name="counterMultiplier" placeholder="請輸入計數器要乘多少倍" required>
  <input type="submit" value="提交倍數">
</form>

## 題目八：手風琴
請製作一個點擊按鈕可以切換文字顯示狀態的元件，有 n 多個這樣的元件，請一次選取起來並綁上監聽。

## 題目九：頁籤

請製作一個具有頁籤功能的元件，有 n 多個這樣的元件，請一次選取起來並綁上監聽。

## 題目十：代辦事項

請製作一個代辦事項，像上周的題目一樣，不過將內容呈現至網頁中。

<!-- 參考答案：

https://codepen.io/fhljksmg-the-styleful/pen/PwZbZVV

答案僅供參考，
答案會使用各種方式書寫(非最佳化)並加上部分解說，
適合初學者還不太會解題或者是該題卡住的同學。
-->