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

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

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

* [DOM 從頭學起](https://www.webdong.dev/post/dom-from-the-begineeing/)
* [為什麼你應該要使用資料屬性 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 多個這樣的元件，請一次選取起來並綁上監聽。

## 題目十：代辦事項

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

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


## 作業提交等級

* LV1：解出 10 題，並提交 Codepen
* LV2：設計一個 hackmd，嘗試自己設計 5 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好

回報區
---

<!-- 參考答案：

https://codepen.io/jmimiding4104/pen/RwEyavg

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

| Discord | LV1 答案 | LV2 自行設計題目 | LV3 做其他學員設計的題目 |
|:----------------:|:----------------------------------------------------------------------------:|:-------------------------------------------------------:|:----------------------------------------------------------------------------:|
| voke | [Codepen](https://codepen.io/FiSi-the-lessful/pen/gOVgqxz) | [學生表演](https://hackmd.io/@tscZKz0FSGa3PpVc74W0cA/S1n5BC6ykl) | |
| Sonia | [Codepen](https://codepen.io/YUJOU/pen/dyxdjNa?editors=1111) | | |
| tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/QWeQpBJ?editors=1011) | | |
|a1phaki(小k)|[CodePen](https://codepen.io/a1phaki/pen/qBeoErB)|||
| 毛巾 |[CodePen](https://codepen.io/bqdcjboa-the-solid/pen/KKOQyEZ)|||
| xiaobeng1075|[CodePen](https://codepen.io/goodea/pen/ExqQpZL)|||
| Tatsu|[CodePen](https://codepen.io/chindesu0207/pen/ZEgRePj)|||
| yuyeh_1212 |[CodePen](https://codepen.io/yuyeh1212/pen/VwoBZRp)| | |
| chris |[CodePen](https://codepen.io/chris-chen-the-selector/pen/bGXjVxP?editors=1111)| | |
| charlottelee |[CodePen](https://codepen.io/char849/pen/ZEgMGNP)| | |
| 歐荻 |[CodePen](https://codepen.io/Odi-Mode/pen/abeRqaP)| | |
|ya_meow| [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/rNXompw)|||
|陳小廷| [Codepen](https://codepen.io/ting1124/pen/VwoEdoY)|||
|Ariel| [Codepen](https://codepen.io/ariel0510/pen/yLmGvMO)|||
|ab567ab5| [Codepen](https://codepen.io/WanTzu-Chiang/pen/xxvzPoW?editors=0011)|||
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/mdNaxWJ)|
| Nocab |[CodePen](https://codepen.io/PeihanWang/pen/KKOYqba?editors=1011)|
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/rNXPvoN?editors=1010)|
|嚼勁先生|[CodePen](https://codepen.io/James520284/pen/RNbNbaq)|
|蘑菇星星|[CodePen](https://codepen.io/brrrieon-the-vuer/pen/dPbogVd?editors=1011)|
|Nooooora|[CodePen](https://codepen.io/Nora-Ch/pen/xbZWOav)|