---
tags: JS 直播班 - 2022 秋季班
---
###### tags: `簡單`

# DOM 操作
## 本章節我們要學什麼？
熟練了使用 Javascript 來創造與操作資料後，接著就可以開始將資料與網頁互動。在本次章節會循序漸進考驗同學選取、修改、監聽 DOM 頁面的能力。

::: 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 = "..."

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

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

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

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

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

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

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

<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 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


## 回饋區

同學如果對於每週作業有建議歡迎隨時在 Discord 提出 📝。

## 作業提交等級

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

回報區
---

| Discord | LV | CodePen / 答案 |
|:-----------------------:|:---:|:--------------------------------------------------------------------------------:|
| Iris Huang#6727（範例） | LV1 | [CodePen](https://codepen.io/ythuang/pen/GRxejgE) |
| Rice#8043 | LV1 |[CodePen](https://codepen.io/riecball/pen/XWYrmKz?editors=0010) |
| YC#2522 | LV1 | [CodePen](https://codepen.io/YCLu/pen/bGKVMVP) |
|yawun#0042|LV1|[CodePen](https://codepen.io/monicalin/pen/NWzGzza)|
|圈圈#4060|LV1|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/NWzGMdK)|
|無名#6427|LV1|[Codepen](https://codepen.io/Nomoney/pen/wvXKjdV?editors=1011)|
|威爾#1694|LV1|[CodePen](https://codepen.io/WILL_Wu/pen/OJEyoBJ)|
|JackC#0411|LV1|[CodePen](https://codepen.io/key0329/pen/BaVoVaj)|
|hsiung阿熊#4079|LV1|[CodePen](https://codepen.io/hsiungchi/pen/rNKOveW)|
|kenki100#0068|LV1|[Codepen](https://codepen.io/ken100/pen/WNyQybR)|
|柔柔#1716|LV1|[Codepen](https://codepen.io/rouchen/pen/LYrGZdR?editors=1011)|
|Sentiments#4883||[Codepen](https://codepen.io/Sentiments/pen/mdKVGeL)|
| 黃士桓#7654 | Lv1 | [CodePen](https://codepen.io/shr-huan-huang/pen/WNyrbeB) |
| KuoMin#4931 | Lv1 | [CodePen](https://codepen.io/KuoMin/pen/YzvwVGb) |
| xherobruce#6825 | Lv1 | [CodePen](https://codepen.io/winwinbruce/pen/OJEyKMd) |
|RyanTsai#8906|Lv1|[CodePen](https://codepen.io/linlaose/pen/eYKpbpz)
|jimmyFang#9575|Lv1|[CodePen](https://codepen.io/pohxiqqo/pen/WNywrJV?editors=1010)
|出事了阿伯#9923|Lv1|[CodePen](https://codepen.io/BradpittLai/pen/xxzwMBv?editors=1111)
|AuroraC#6539|LV1|[codepen](https://codepen.io/AuroraC/pen/PoaNRdJ?editors=1010)|
|Amberhh#2465|LV1 |[Codepen](https://codepen.io/Amberhh/pen/LYrpmWd?editors=0010) |
|mandylai#4055|LV1 |[Codepen](https://codepen.io/mandy-lai-2/pen/zYavabQ?editors=0011) |
|CloThEs#7837|LV1 |[Codepen](https://codepen.io/CloThEsZ/pen/LYrNXOE) |
|yoshidc#0455|LV1 |[Codepen](https://codepen.io/yoshiyyc/pen/bGKEgoK) |
|albee#9121|LV1|[Codepen](https://codepen.io/albee-chang/pen/oNyjypv?editors=1011)|
|薯餅#3581|LV1|[Codepen](https://codepen.io/ColdingPoTaTo/pen/YzvqMve)|
|法希娜#3206|LV1|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/LYrNYPw?editors=1111)|
|FiReBrO#0557|LV1|[Codepen](https://codepen.io/firebro42/pen/mdKPjOE)|
|Kevin #6131|LV1|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/PoaPgGV?editors=1011)|
| azami#5986 |LV1|[CodePen](https://codepen.io/azami/pen/GRGZJdg)|
| suihsilan#9485 |LV1|[CodePen](https://codepen.io/suihsilan/pen/NWzNyvN)|
| hannahTW#2224 |LV2|[CodePen](https://codepen.io/hangineer/pen/eYKprMR?editors=0011)/[HackMD](https://hackmd.io/@XuLchNweTiC4s2NZlAlQDw/HyzMf3hEj)|
| Ron Liang#7277 |LV1|[CodePen](https://codepen.io/ron-go/pen/BaVLoEZ)|
|Benson#6763|LV1|[Codepen](https://codepen.io/kumashow/pen/MWXyYgN)|
|yoyo#1003|LV1|[Codepen](https://codepen.io/pen/BaVzgRL?editors=1111)|
|WEI_RIO#9342|Lv1|[codepen](https://codepen.io/wei_wu/pen/ExRVpga?editors=1010)|
|PayRoom|LV1|[CodePen](https://codepen.io/water38198/pen/YzvwoEp)
|charlottelee849#0366|Lv1|[codepen](https://codepen.io/charlotte-lee/pen/RwJabyw?editors=1011)|
|SASIMI#5099|LV1|[codepen](https://codepen.io/sashimi1327/pen/rNKxBKq)|
| m_m#5493 | LV1 | [CodePen](https://codepen.io/minnn7716/pen/gOKLvbv) |
|sophiee#7015|LV1|[Codepen](https://codepen.io/sophiee2727/pen/poKgzRW)|
|王懷英#7271|LV1|[Codepen](https://codepen.io/huaiying/pen/vYrLROK)
|amy芳#1385|LV2|[Codepen](https://codepen.io/amy-chieng/pen/jOKyLEw)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|LV1|[CodePen](https://codepen.io/Connie-Chien/pen/RwJKKyO?editors=0010)|
|Vera#5592|LV1|[CodePen](https://codepen.io/skvera/pen/JjZXERg)|
|0xWilliam #8796 |LV1| [CodePen](https://codepen.io/0xWilliam0322/pen/KKeaROx)
|RJRS#9430|LV1|[CodePen](https://codepen.io/RJRS/pen/yLEYqoW)|
|hungya#0773|LV1|[CodePen](https://codepen.io/hungya777/pen/ZERLNLN?editors=0011)|
|心幻羽#0056|LV1|[CodePen](https://codepen.io/linglingsyu/pen/yLEerWa?editors=1111)|
|Cliff#4606|LV1|[Codepen](https://codepen.io/Cliff_hex/pen/WNypYQW?editors=1011)|
| LHchien33#6232 |LV1|[Codepen](https://codepen.io/lin_chien/pen/BaVoOeo)|
| 雷雷#7844 |LV1|[Codepen](https://codepen.io/lei-yi-jie/pen/poKNoXa?editors=1010)|
|Lucie#3831|LV1|[Codepen](https://codepen.io/bisespei/pen/jOKMjjY)|
|Paul#7426|LV1|[CodePen](https://codepen.io/paul-1997/pen/bGKpmoV?editors=1011)|
|IreneY#0086|Lv1|[codepen](https://codepen.io/HalfPlannedJourney/pen/BaVOReZ)|
|Kimi#9564|Lv1|[codepen](https://codepen.io/kimihu91/pen/wvXMZpZ)|
|蓁心#6229|Lv1|[codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/BaVjBQz?editors=1010)|