---
tags: JS 直播班 - 2023 秋季班
---
>若有任何疑問請至 Discord「作業討論」頻道討論

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


## 作業提交等級

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

回報區
---

<!-- 參考答案：

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

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

| Discord | LV1 答案 |LV2 自行設計題目 | LV3 做其他學員設計的題目 |
|:-:|:-:|:-:|:-:|
|保羅|[codePen](https://codepen.io/paul-1997/pen/LYqxPJB?editors=1011)| | |
|詹姆士|[codePen](https://codepen.io/z111048/pen/RwvKwXG)| | |
|Chia Pin|[codePen](https://codepen.io/joker-cat/pen/zYeNzWm)| | |
|Ataraxia|[codePen](https://codepen.io/ataraxia8888/pen/QWYdbeK)| | |
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/ExrZZJJ)| | |
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/YzBNKNv?editors=1011)| | |
|午夜咖哩飯|[CodePen](https://codepen.io/kouta-f2e/pen/YzBNWdy)| | |
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/GRzrJyz?editors=1111)| | |
| 蛋塔 |[CodePen](https://codepen.io/Hong-Game1/pen/dyaNxmp?editors=1111)| | |
| runweiting | [codePen](https://codepen.io/weiting14/pen/QWYdQbR) |
| Alyce | [codePen](https://codepen.io/alycehwy/pen/ZEweyLy?editors=0010) |
| xiaokui_71292 | [CodePen](https://codepen.io/pen?template=yLZgEQa)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/vYbxMWG)|
| MY | [codePen](https://codepen.io/ahmomoz/pen/YzBNqrj?editors=1111) |
| ann6212 | [codePen](https://codepen.io/yqmegupa-the-styleful/pen/rNPjLjv?editors=1011) |
| Yijing | [codePen](https://codepen.io/Yi-Jing-71080635/pen/xxMgzYX) | | |
| tanuki5863 | [codePen](https://codepen.io/tanuki320/pen/eYxgYob?editors=0111) | | |
| jiayu | [codePen](https://codepen.io/fjqxaznl-the-reactor/pen/vYbmLby?editors=1011) | | |
| 奔跑吧(GTR150) | [codePen](https://codepen.io/Wer-Qwe/pen/vYbgGav?editors=1011) | | |
| Suzi | [codePen](https://codepen.io/midomommy/pen/jOdmxRK) | | |
| dora | [codePen](https://codepen.io/dorayu/pen/LYqxpQK) | | |
| Celine 510 | [codePen](https://codepen.io/Celine-510/pen/poGwPdG) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/QWYvQzR)|
| Uli | [codePen](https://codepen.io/uli1313/pen/xxMrvoe) | | |
| cest_jessi | [codePen](https://codepen.io/itsjessiechen/pen/qBgmOpy) | | |
| xin | [codePen](https://codepen.io/Estherrrrrr999/pen/ExrZjVZ) | | |
| Fabio20 | [codePen](https://codepen.io/fabio7621/pen/gOqRdjr?editors=1111) | | |
| peggy | [codePen](https://codepen.io/peggylai/pen/xxMLyNw) | | |
|RX00| [codePen](https://codepen.io/llqzknqv-the-styleful/pen/ExrWNyy?editors=1011) | | |
|shuuu| [codePen](https://codepen.io/afjrvjzl-the-bashful/pen/QWYvqYX?editors=1111) | | |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/xxMPqVd) | | |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/mdvmmVM) | | |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/BaMRowa) | | |
| 白夜 | [codePen](https://codepen.io/Wei903/pen/YzBxbxw?editors=1111) | | |
| bf_tsai | [codePen](https://codepen.io/BF-Tsai/pen/eYxLKmj?editors=1111) | | |
| 郭芙蘭#6374 | [github](https://github.com/Florakuo1112/weekly-challange-DOM) | | |
| JasonFu | [codePen](https://codepen.io/jie-Fu/pen/gOqRRBJ) | | |
| kawa | [codePen](https://codepen.io/z83xji6/pen/YzBgBrv?editors=1111)

<!--快速複製
| Discord | [codePen]() | | |
-->