---
# System prepended metadata

title: "\U0001F3C5 Day 21 - DOM 選擇器"
tags: [JS 直播班 - 2023 秋季班]

---

---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 21 - DOM 選擇器

這週我們學到 querySelector 這個強大的選擇器，它會回傳它在網頁 document 中所找到的 **「第一個」** 符合設定的元素，在 HTML 中由上而下開始找。

請同學依照下方練習，並回答問題。

### querySelector 選取方式

1. 可以直接選取 HTML 元素

    HTML: 
    ```htmlembedded=
    <!-- querySelector 只會回傳第一個符合選取條件的元素 -->
    <p>我被 el 選到了</p>  
    <p>我沒有被選到</p>
    ```
    JS:
    ```javascript=
    const el = document.querySelector("p");
    ```

2. 可以選取帶有 id 或 class 的元素

    HTML:
    ```htmlembedded=
    <p id="targetID">我被 elementID 選到了</p>
    <p class="targetClass">我被 elementClass 選到了</p>
    ```
    JS:
    ```javascript=
    const elementID = document.querySelector("#targetID");
    const elementClass = document.querySelector(".targetClass");
    ```

3. 可以用類似 CSS 的撰寫方式選取

    HTML:
    ```htmlembedded=
    <div id="targetID">
      <p>我被 elementID 選取到了</p>
    </div>
    <!-- 以下是 span 被選取到 -->
    <div class="targetClass">
      <p>
        <span>我被 elementClass 選取到了</span>
      </p>
    </div>
    ```
    JS:
    ```javascript=
    const elementID = document.querySelector("#targetID p");
    const elementClass = document.querySelector(".targetClass > p > span");
    ```

問題
---
請同學練習用上述第 2、3 個方法選取下方程式碼中的 p 標籤

HTML
```htmlembedded=
<!-- 第一題，請選取以下 p 標籤 -->
<p id="targetID">請選取我</p>

<!-- 第二題，請選取以下 p 標籤 -->
<p class="targetClass">請選取我</p>

<!-- 第三題，請選取以下第二個 p 標籤 -->
<div class="targetAElementP">
  <p>請不要選取我</p>
</div>
<div class="targetBElementP">
  <p>請選取我</p>
</div>
```



## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

const targetID = document.querySelector("#targetID");
const targetClass = document.querySelector(".targetClass");
const targetBElementP = document.querySelector(".targetBElementP p");
-->




回報區
---


|    Discord     |                                                                                               CodePen / 答案                                                                                                |
|:--------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|     Mattie     |                                                                      [CodePen](https://codepen.io/mattielin/pen/XWONvBb?editors=1111)                                                                       |
|     yuan!      |                                                                             [CodePen](https://codepen.io/townyuan/pen/GRzNVed)                                                                              |
|     Helen      |                                                                    [CodePen](https://codepen.io/milkteamonster/pen/eYxBqxN?editors=1011)                                                                    |
|    pinyi_9     |                                                                        [CodePen](https://codepen.io/Wpypy/pen/PoVbMvd?editors=1010)                                                                         |
|      Peng      |                                                                        [CodePen](https://codepen.io/H-Peng/pen/poGRzoo?editors=0010)                                                                        |
|      精靈      |                                                                            [CodePen](https://codepen.io/justafairy/pen/OJdWLVr)                                                                             |
|    hsu0921     |                                                                            [CodePen](https://codepen.io/HSUANIN0327/pen/LYqxPpz)                                                                            |
|    Ataraxia    |                                                                           [CodePen](https://codepen.io/ataraxia8888/pen/VwgjXGp)                                                                            |
|     yuling     |                                                                             [codepen](https://codepen.io/igzdflpu/pen/BaMpBoM)                                                                              |
|     銀光菇     |                                                                           [CodePen](https://codepen.io/genesynthesis/pen/xxMgKZr)                                                                           |
|    kuanju27    |                                                                            [CodePen](https://codepen.io/Eero-Chiao/pen/WNPReON)                                                                             |
|      Ivy       |                                                                       [CodePen](https://codepen.io/Irene-Ke/pen/eYxgOPR?editors=1010)                                                                       |
|      Uli       |                                                                       [CodePen](https://codepen.io/uli1313/pen/VwgPZEV?editors=1011)                                                                        |
|     Rogan      |                                                                       [CodePen](https://codepen.io/RoganHsu/pen/rNPjByj?editors=1111)                                                                       |
|      Andy      |                                                                      [CodePen](https://codepen.io/andy31342/pen/RwvKwGb?editors=1111)                                                                       |
|     Winnie     |                                                                  [CodePen](https://codepen.io/codepen-io-winnie/pen/mdvRddN?editors=1011)                                                                   |
|      dora      |                                                                        [CodePen](https://codepen.io/dorayu/pen/RwvKwRb?editors=1011)                                                                        |
|    ming0712    |                                                                     [CodePen](https://codepen.io/StevenHuang/pen/BaMpapz?editors=1010)                                                                      |
|   tanuki5863   |                                                                      [CodePen](https://codepen.io/tanuki320/pen/bGzgGxR?editors=1011)                                                                       |
|    Moreene     |                                                                              [CodePen](https://codepen.io/Moreene/pen/LYqxYBw)                                                                              |
|   荷菓かのり   | [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/yLZgLjK?editors=0001https://codepen.io/oogxwkvw-the-builder/pen/yLZgLjK?editors=0001https://codepen.io/oogxwkvw-the-builder/pen/yLZgLjK?editors=0001) |
|      Eden      |                                                                              [Codepen](https://codepen.io/iseden/pen/jOdyEPp)                                                                               |
|      xin       |                                                                          [CodePen](https://codepen.io/Estherrrrrr999/pen/BaMpyKJ)                                                                           |
|   stone4584    |                                                                      [CodePen](https://codepen.io/Royen0506/pen/gOqgbPR?editors=1111)                                                                       |
|   damon0323    |                                                                       [CodePen](https://codepen.io/swk9eny2/pen/bGzgNgM?editors=1011)                                                                       |
|      SHUO      |                                                                 [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/qBgREYa?editors=1112)                                                                 |
|     Yijing     |                                                                   [CodePen](https://codepen.io/Yi-Jing-71080635/pen/jOdyEKJ?editors=1011)                                                                   |
|      RX00      |                                                                [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/dyaNPgR?editors=1011)                                                                 |
|     CPing      |                                                                        [CodePen](https://codepen.io/CPing/pen/mdvRygx?editors=1111)                                                                         |
|     Alyce      |                                                                       [CodePen](https://codepen.io/alycehwy/pen/oNmBXgG?editors=1010)                                                                       |
|    yuan2781    |                                                                              [CodePen](https://codepen.io/ismebir/pen/WNPRvvq)                                                                              |
|     Rxzan      |                                                                            [CodePen](https://codepen.io/Tzuru-Chen/pen/rNPjVjW)                                                                             |
|    Fabio20     |                                                                             [CodePen](https://codepen.io/fabio7621/pen/BaMpNqB)                                                                             |
|     claire     |                                                                            [CodePen](https://codepen.io/yi-wen-chen/pen/zYeNGMP)                                                                            |
|      kawa      |                                                                       [CodePen](https://codepen.io/z83xji6/pen/bGzgdPE?editors=1011)                                                                        |
|  hsuanlee1084  |                                                                     [CodePen](https://codepen.io/hsuanlee1024/pen/oNmBXKQ?editors=1010)                                                                     |
|    ann6212     |                                                                [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/oNmYwgO?editors=1112)                                                                 |
| (奔跑吧)GTR150 |                                                                       [CodePen](https://codepen.io/Wer-Qwe/pen/PoVWZYm?editors=1111)                                                                        |
|    Chia Pin    |                                                                             [CodePen](https://codepen.io/joker-cat/pen/bGzgpbz)                                                                             |
|       MY       |                                                                       [CodePen](https://codepen.io/ahmomoz/pen/abXpNZW?editors=1111)                                                                        |
|   runweiting   |                                                                             [CodePen](https://codepen.io/weiting14/pen/poGRywj)                                                                             |
|  celinelinnn   |                                                                           [CodePen](https://codepen.io/celinephoebe/pen/poGRyWg)                                                                            |
|    gebyman     |                                                                       [CodePen](https://codepen.io/gebyman/pen/BaMpKMa?editors=0011)                                                                        |
|      保羅      |                                                                             [CodePen](https://codepen.io/paul-1997/pen/XWOprBa)                                                                             |
|      依依      |                                                                      [CodePen](https://codepen.io/Rita-Yang/pen/QWYdErq?editors=1111)                                                                       |
|    smalljie    |                                                                             [Codepen](https://codepen.io/smalljie/pen/eYxgzLL)                                                                              |
|   santu0868    |                                                                      [CodePen](https://codepen.io/HatsumiSan/pen/JjxEKwQ?editors=1111)                                                                      |
|    yu.t_liu    |                                                                             [CodePen](https://codepen.io/YuT200053/pen/BaMpLeq)                                                                             |
|      小夏      |                                                                            [CodePen](https://codepen.io/michaelhsia/pen/wvNgoPL)                                                                            |
|   lychee_kk    |                                                                             [CodePen](https://codepen.io/kakakala/pen/rNPjyOR)                                                                              |
|     Allen      |                                                                    [CodePen](https://codepen.io/genesynthesis/pen/xxMgKZr?editors=1111)                                                                     |
|     Cosmos     |                                                                            [CodePen](https://codepen.io/violet7755/pen/yLZgbBB)                                                                             |
|     Ching      |                                                                      [CodePen](https://codepen.io/tzuchingg/pen/OJdWgmM?editors=1011)                                                                       |
|      維哲      |                                                                              [CodePen](https://codepen.io/kwz1202/pen/gOqgvrd)                                                                              |
|    JasonFu     |                                                                              [CodePen](https://codepen.io/jie-Fu/pen/qBgRxop)                                                                               |
|  cest_jessie   |                                                                           [CodePen](https://codepen.io/itsjessiechen/pen/mdvRxbY)                                                                           |
|      Oria      |                                                                        [CodePen](https://codepen.io/kajing/pen/poGRLrr?editors=0011)                                                                        |
|      風羽      |                                                                      [CodePen](https://codepen.io/Joy-Huang/pen/VwgPBxo?editors=0011)                                                                       |
|    phyllis     |                                                                       [CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/MWLJapr)                                                                       |
|      MDFK      |                                                                       [CodePen](https://codepen.io/maywang/pen/mdvRzYo?editors=1011)                                                                        |
|   Vivian2857   |                                                                  [CodePen](https://codepen.io/uojbohed-the-solid/pen/gOqgyxR?editors=1010)                                                                  |
| yaoling.liang  |                                                                     [CodePen](https://codepen.io/Yao-Ling-L-/pen/WNPRqJp?editors=1012)                                                                      |
|      xuan      |                                                                       [CodePen](https://codepen.io/xuan0915/pen/GRzWqgL?editors=1011)                                                                       |
|     Ccccc      |                                                                      [CodePen](https://codepen.io/CyreneTsai/pen/qBgrRrM?editors=1011)                                                                      |
|    ⭐️小正     |                                                                     [CodePen](https://codepen.io/colorgolden/pen/eYxgdPY?editors=1111)                                                                      |
|     Jerry      |                                                                 [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/YzBZQzJ?editors=1010)                                                                 |
|   阿賀#3700    |                                                                            [CodePen](https://codepen.io/sungho/details/eYxvMOg)                                                                             |
| xiaokui_71292  |                                                                             [CodePen](https://codepen.io/pen?template=KKJWbao)                                                                              |
|  郭芙蘭#6374   |                                                                      [CodePen](https://codepen.io/flora_Kuo/pen/XWOMQKy?editors=1011)                                                                       |
|     Tina02     |                                                                       [CodePen](https://codepen.io/chjitlox-the-bashful/pen/rNPyMGb)                                                                        |
|     JUNEW      |                                                                              [CodePen](https://codepen.io/June-W/pen/qBgmWrq)                                                                               |
|     sponge     |                                                                [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/jOdmYyG?editors=1010)                                                                |
|   Joy-chiang   |                                                                 [CodePen](https://codepen.io/dcthmcje-the-reactor/pen/BaMRrLe?editors=1010)                                                                 |
|     jiayu      |                                                                 [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/dyaWBMd?editors=1111)                                                                 |
|  hsuhsusophie  |                                                                     [CodePen](https://codepen.io/hsuhsusophie/pen/RwvVzyv?editors=1012)                                                                     |
|      小廷      |                                                                [CodePen](https://codepen.io/uyxkiake-the-selector/pen/PoVmrar?editors=1011)                                                                 |
|  nini1202desu  |                                                                       [CodePen](https://codepen.io/tvxq5206/pen/YzBQpdr?editors=1011)                                                                       |
|      白夜      |                                                                        [CodePen](https://codepen.io/Wei903/pen/eYxRRMg?editors=1011)                                                                        |
|    davidTT     |                                                                      [CodePen](https://codepen.io/David-Tsai/pen/QWYgrea?editors=1011)                                                                      |
|   _shun0130    |                                                                     [CodePen](https://codepen.io/koba60052ww/pen/PoVjLjx?editors=1011)                                                                      |
|     shcopy     |                                                                              [CodePen](https://codepen.io/shcopy/pen/PoVJRbQ)                                                                               |
| nikkita_3544  |                                                                             [Codepen](https://codepen.io/vanessa7259/pen/GRzQRjZ?editors=0010)                                                                                                                                |
| Iris  |                                                                             [Codepen](https://codepen.io/iris831206/pen/XWOZaBd?editors=1111)                                                                                                                                |
| ChrisSQR    | [Codepen](https://codepen.io/ChrisSQR/pen/BaMYYEo)|
| Daylily    | [Codepen](https://codepen.io/daylily/pen/JjxpaWX)|
| jimmy.0706    | [Codepen](https://codepen.io/WeiJun-Mao/pen/bGzLOyZ?editors=1011)|
| Hank._.z | [Codepen](https://codepen.io/linoiaby-the-sans/pen/yLZjKPX?editors=1111)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/oNmyvZW)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/VwgBVay)|
|sunny_08149|[Codepen](https://codepen.io/vjgpcfpk-the-builder/pen/bGzjzpY)|
|bf_tsai|[Codepen](https://codepen.io/BF-Tsai/pen/XWOPJgE?editors=1010)|
|NathanJames|[Codepen](https://codepen.io/ufo060204/pen/ZEwqzBj)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/ExrdBQP?editors=1011)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/yLZQReb) |
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/abXPLZY)|
| 雪維 | [Codepen](https://codepen.io/Shawey/pen/MYgXXqb) |