---
# System prepended metadata

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

---

---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 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 / 答案                                  |
|:----------------:|:--------------------------------------------------------------------------------:|
|   嗶嗶羊#8042    | [Codepen](https://codepen.io/mazizlte-the-typescripter/pen/MWXyVrz?editors=1011) |
|  masterYan#2480  |    [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/RwJWOoY?editors=1011)    |
| hsiung阿熊#4079  |               [Codepen](https://codepen.io/hsiungchi/pen/RwJWywB)                |
|     YC#2522      |                  [CodePen](https://codepen.io/YCLu/pen/jOKbxEO)                  |
|   CloThEs#7837   |                [Codepen](https://codepen.io/CloThEsZ/pen/ExRVLaW)                |
|    azami#5986    |                 [Codepen](https://codepen.io/azami/pen/zYavjYN)                  |
|    圈圈#4060     |           [Codepen](https://codepen.io/whejfczn-the-bold/pen/QWxjryW)            |
|  Hironaka#7367   |              [Codepen](https://codepen.io/Hironaka0815/pen/JjZYvKO)              |
|  hannahTW#2224   |         [Codepen](https://codepen.io/hangineer/pen/PoaPeZV?editors=1111)         |
|   Eileen#6454    |               [Codepen](https://codepen.io/Eileen-io/pen/rNKOvWj)                |
|    Data#9297     |               [Codepen](https://codepen.io/kirakira72/pen/zYavjKw)               |
|   KC_8685#9343   |               [Codepen](https://codepen.io/cathy7411/pen/abKvGZy)                |
|     威0#6919     |        [codepen](https://codepen.io/n0918679182/pen/PoaPebL?editors=1011)        |
|   yoshidc#0455   |                [codepen](https://codepen.io/yoshiyyc/pen/ZERboKB)                |
|    Clara#1275    |         [codepen](https://codepen.io/bsupixqu/pen/poKjVPy?editors=1111B)         |
|    albee#9121    |        [Codepen](https://codepen.io/albee-chang/pen/MWXaGoj?editors=1011)        |
|     VT#0895      |                 [Codepen](https://codepen.io/vt197/pen/BaVoxdX)                  |
|    芮綺#5224     |          [Codepen](https://codepen.io/zhan70/pen/KKedRgd?editors=1011)           |
|   Winnie#1306    |      [Codepen](https://codepen.io/WinnieWuWinnie/pen/ZERbove?editors=1011)       |
|    無名#6427     |          [Codepen](https://codepen.io/Nomoney/pen/jOKbxwb?editors=1010)          |
|   楓之聲#6945    |               [Codepen](https://codepen.io/sshane258/pen/ExRVLEo)                |
|    薯餅#3581     |             [Codepen](https://codepen.io/ColdingPoTaTo/pen/poKjVaE)              |
|    Chung#5951    |          [Codepen](https://codepen.io/yuju16/pen/dyKYemg?editors=1011)           |
|    JackC#0411    |                [Codepen](https://codepen.io/key0329/pen/vYrNjjb)                 |
|    威爾#1694     |                [CodePen](https://codepen.io/WILL_Wu/pen/BaVoxqy)                 |
|   AuroraC#6539   |          [codepen](https://codepen.io/AuroraC/pen/MWXaGqm?editors=1011)          |
|   法希娜#3206    |   [codepen](https://codepen.io/yiiserpf-the-encoder/pen/wvXKjOK?editors=1010)    |
|    艸良#2846     |              [codepen](https://codepen.io/momoninainai/pen/vYrNjPw)              |
|  kenki100#0068   |                 [codepen](https://codepen.io/ken100/pen/xxzwjBJ)                 |
|    Peng#9811     |                [codepen](https://codepen.io/peng-027/pen/LYrpmvX)                |
|    kuku#3118     |              [Codepen](https://codepen.io/mengting-ku/pen/JjZYZde)               |
| 出事了阿伯#9923  |        [Codepen](https://codepen.io/BradpittLai/pen/mdKeKbb?editors=1011)        |
| jacky010080#0880 |       [CodePen](https://codepen.io/Yen-Jung-Chen/pen/MWXaXaO?editors=1010)       |
|   Benson#6763    |                [Codepen](https://codepen.io/kumashow/pen/RwJWJrw)                |
|    RJRS#9430     |                  [CodePen](https://codepen.io/RJRS/pen/WNyQyQR)                  |
|    amy芳#1385    |               [Codepen](https://codepen.io/amy-chieng/pen/poKjKbW)               |
|   Hazel.#6020    |        [codepen](https://codepen.io/Hazelhsieh/pen/bGKVMpP?editors=1011)         |
|    yumy#1940     |               [Codepen](https://codepen.io/yumy_yamg/pen/XWYmYjB)                |
|   心幻羽#0056    |              [Codepen](https://codepen.io/linglingsyu/pen/jOKbKVL)               |
|    yawun#0042    |               [CodePen](https://codepen.io/monicalin/pen/Vwdvdmo)                |
|    大衛#4869     |         [CodePen](https://codepen.io/exnsrpjc/pen/GRGpGBj?editors=1010)          |
| Cookie SSS#6991  |   [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/jOKbKvz?editors=1011)   |
| Ryan Chiang#6649 |        [Codepen](https://codepen.io/ryanchiang/pen/QWxjBLx?editors=1011)         |
|   PayRoom#8328   |               [CodePen](https://codepen.io/water38198/pen/KKedBpG)               |
|   粉蒸肉#6214    |         [Codepen](https://codepen.io/wrightyu/pen/rNKOrOE?editors=1011)          |
|   WEI_RIO#9342   |          [codepen](https://codepen.io/wei_wu/pen/abKvjNz?editors=1011)           |
|  JustinLiu#9699  |        [CodePen](https://codepen.io/justin0227/pen/MWXaBex?editors=1010)         |
|    Ayre#0016     |        [Codepen](https://codepen.io/yichunlin09/pen/QWxjBdZ?editors=1010)        |
|    末次#0236     |                [Codepen](https://codepen.io/yunjulee/pen/WNyQKZY)                |
| Sentiments#4883  |        [codepen](https://codepen.io/Sentiments/pen/JjZYBBb?editors=1011)         |
|  Potatolee#7749  |               [codepen](https://codepen.io/potatoleee/pen/YzvyjJE)               |
|  shinyhung#3825  |         [codepen](https://codepen.io/sean_1215/pen/yLEYqWy?editors=1111)         |
|    教練#6451     |       [codepen](https://codepen.io/monkeybear721/pen/wvXKxVO?editors=1011)       |
|  RyanTsai#8906   |                [CodePen](https://codepen.io/linlaose/pen/oNyjPWd)                |
|     YI#0863      |          [CodePen](https://codepen.io/YI0305/pen/xxzwaqP?editors=0012)           |
|  LHchien33#6232  |         [CodePen](https://codepen.io/lin_chien/pen/ZERbMLp?editors=1011)         |
|    Vera#5592     |                 [CodePen](https://codepen.io/skvera/pen/rNKOZdw)                 |
| 勁辣雞腿寶#5817  |               [Codepen](https://codepen.io/orz311013/pen/wvXKEmv)                |
|   黑白兔#0684    |               [Codepen](https://codepen.io/johnny329/pen/poKjOBe)                |
|  banazita#5143   |         [CodePen](https://codepen.io/banazita/pen/MWXaqNE?editors=1111)          |
| 0xWilliam #8796  |       [CodePen](https://codepen.io/0xWilliam0322/pen/RwJWeWb?editors=0011)       |
|    Kimi #9564    |                [Codepen](https://codepen.io/kimihu91/pen/WNyQaeo)                |
|   SASIMI#5099    |              [Codepen](https://codepen.io/sashimi1327/pen/JjZYmJz)               |
|   肉桂卷#0625    |          [Codepen](https://codepen.io/ginnlee/pen/eYKpPrP?editors=1012)          |
|    雷雷#7844     |               [Codepen](https://codepen.io/lei-yi-jie/pen/GRGpYQq)               |
|    Kevin#6131    |   [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/ZERbmEw?editors=1011)    |
|   Jenny真#7532   |        [CodePen](https://codepen.io/wei-chen-wu/pen/jOKbQog?editors=0010)        |
|    Greta#0837    |                [CodePen](https://codepen.io/gretali/pen/ZERbVaL)                 |
| jackson204#6363  |               [CodePen](https://codepen.io/jackson204/pen/KKedbrN)               |
|    Hilda#7085    |           [CodePen](https://codepen.io/vwquikad-the-vuer/pen/GRGpeKW)            |
|  Ruby Chen#7452  |         [CodePen](https://codepen.io/ruby92429/pen/gOKaEax?editors=1111)         |
|   Amberhh#2465   |          [Codepen](https://codepen.io/Amberhh/pen/XWYmBgW?editors=0010)          |
|   黃士桓#7654    |             [codePen](https://codepen.io/shr-huan-huang/pen/Yzvygvx)             |
|     cbs#9007     |                 [Codepen](https://codepen.io/wasdjk/pen/vYrNPzW)                 |
|    蓁心#6229     | [Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/KKedYKP?editors=1011) |
| William Lai#0196 |               [Codepen](https://codepen.io/lai-weihan/pen/PoaPgXY)               |
|    Rena#6249     |        [Codepen](https://codepen.io/aureate0116/pen/jOKboLG?editors=0010)        |
|     mou#2215     |       [Codepen](https://codepen.io/shihchiehlan/pen/WNyQBpj?editors=1010)        |
|    萱仔#0781     |        [Codepen](https://codepen.io/ting-hsuan/pen/vYrNMXa?editors=1010)         |
|     安o#2448     |          [Codepen](https://codepen.io/JzhenAn/pen/dyKYBdv?editors=1011)          |
|    竹輪#3335     |              [Codepen](https://codepen.io/chikuwa0120/pen/JjZYgNO)               |
|   bingsu#2362    |           [Codepen](https://codepen.io/pmyfr/pen/ExRVqWX?editors=0010)           |
|    Lucie#3831    |                [Codepen](https://codepen.io/bisespei/pen/YzvyobY)                |
|   sophiee#7015   |        [codepen](https://codepen.io/sophiee2727/pen/BaVjBWz?editors=1111)        |
|  jimmyFang#9575  |         [codepen](https://codepen.io/pohxiqqo/pen/wvXMwXd?editors=1010)          |
|   王懷英#7271    |                [codepen](https://codepen.io/huaiying/pen/YzvwWgr)                |
|  mandylai#4055   |        [codepen](https://codepen.io/mandy-lai-2/pen/KKeVgZd?editors=1011)        |
|    予予#9627     |         [codepen](https://codepen.io/kiqzcraa/pen/YzvwGjJ?editors=1111)          |
|   Mylène#2481    |              [Codepen](https://codepen.io/hamajibashi/pen/VwdeKVE)               |
|  christina#6185  |               [Codepen](https://codepen.io/chrisc0210/pen/WNyrobx)               |
|    yaru#6308     |                [Codepen](https://codepen.io/lszaietc/pen/RwJroob)                |
|   Loran #1105    |                [Codepen](https://codepen.io/loranlin/pen/WNyrxMa)                |
|    Yiru#0236     |          [Codepen](https://codepen.io/yiru94/pen/QWxydGB?editors=1011)           |
|   hungya#0773    |         [Codepen](https://codepen.io/hungya777/pen/qBKbRVZ?editors=0011)         |
|   IreneY#0086    |           [codepen](https://codepen.io/HalfPlannedJourney/pen/eYKJgXm)           |
|  beta lin#1445   |                [CodePen](https://codepen.io/linbeta/pen/yLEebEv)                 |
|  我是泇吟#5189   |                [CodePen](https://codepen.io/kljuqbxs/pen/BaVjdZE)                |
|   哈囉哈#5196    |        [CodePen](https://codepen.io/bill0841205/pen/OJEMxRy?editors=1011)        |
|    shio#1414     |          [CodePen](https://codepen.io/shioyen/pen/JjZGrvz?editors=1111)          |
|    yoyo#1003     | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/jOKWGKG?editors=1111) |
|   CofCat#9226    |         [CodePen](https://codepen.io/cofcat456/pen/jOKWJXX?editors=1111)         |
|   魚子醬#5220    |         [CodePen](https://codepen.io/haihsuan/pen/YzvwoRV?editors=1111)          |
|    柔柔#1716     |          [Codepen](https://codepen.io/rouchen/pen/mdKVNex?editors=1111)          |
|  Ron Liang#7277  |                 [Codepen](https://codepen.io/ron-go/pen/yLEOLMR)                 |
|    母湯#7211     |        [Codepen](https://codepen.io/tommyshih77/pen/dyKoJWQ?editors=1011)        |
|  Silvialu#4521   |              [Codepen](https://codepen.io/Silvia091640/pen/xxzVGjQ)              |
|  Judy Wei#6103   |                [Codepen](https://codepen.io/Judy0718/pen/bGKpVdr)                |
|    yen #5757     |       [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=0011)       |
|  kancheng#3915   |         [CodePen](https://codepen.io/kancheng/pen/rNKemxz?editors=1111)          |
|    Rr#2215              |       [Codepen](https://codepen.io/rufangcheng/pen/QWxNVQX)                                                                           |
|  suihsilan#9485  |         [CodePen](https://codepen.io/suihsilan/pen/YzvqagN?editors=1010)         |
|    Paul#7426     |         [CodePen](https://codepen.io/paul-1997/pen/QWxNVrX?editors=1011)         |
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/rNKeqbv?editors=0011)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/RwJRoaq) |
|Azi Hsieh#2861|[CodePen](https://codepen.io/AziHsieh/pen/KKeMNOq)|
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/jOKrmRB) |
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/mdKEwQO)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/MWXeQmb?editors=0012)|
|健育#5748|[Codepen](https://codepen.io/c1317156/pen/qBKNGNV)|
|Cynrhia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/NWzrVzq)|
|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/Poazrqq?editors=1011)|
|How#5806|[Codepen](https://codepen.io/howtobefine/pen/PoaGYzX?editors=1111)
|poetry1933#2713|[Codepen](https://codepen.io/poetry1932/pen/JjZRKMz?editors=1111)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/QWxKdoa?editors=1011)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/GRGjLvm)|
|Yuna Huang#2692|[codepen](https://codepen.io/Yuna1002/pen/ZERBQpm?editors=1011)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/MWXbepo)|
|ling chang#1024|[codepen](https://codepen.io/ling-chang/pen/oNyYpYN)|
|charlottelee849#0366|[codepen](https://codepen.io/charlotte-lee/pen/GRGNQjx?editors=1011)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/XWYNEqE?editors=0011)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/ZERBrQz?editors=1011)|
|Lou#0085|[CodePen](https://codepen.io/Lusie_H/pen/wvXoOEG?editors=1011)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/GRGrNQd?editors=1011)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/PoaWWVw)|
|Velma#1693|[codepen](https://codepen.io/Ze1225/pen/NWzdgaq)|
|Mia小福#4473|[codepen](https://codepen.io/a0950271/pen/PoaWajR?editors=1111)|
|FiReBrO#0557|[codepen](https://codepen.io/firebro42/pen/oNyZoVP)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/ExRWOPg)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/VwdWYjG?editors=1010)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/LYrLwyQ?editors=1011)|
|meimei#9524|[codepen](https://codepen.io/isnrudav/pen/KKeXZKE)|
|阿蘇#8531|[codepen](https://codepen.io/susu3131/pen/poKWpOJ?editors=1111)|
|艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/gOKGeLL)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/zYapLJM)|
|pss940909#8650|[codepen](https://codepen.io/pss940909/pen/vYrdOja?editors=1111)|
|Chloe#5422|[Codepen](https://codepen.io/Ironchloe/pen/yLEvMVq?editors=1010)|
|阿風#6890|[Codepen](https://codepen.io/Afonguwu/pen/QWxQMez)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/oNyPEbJ?editors=1010)|
|Ringo#7583|[Codepen](https://codepen.io/ringolai1988/pen/gOKQqpQ)|
|samger#0808|[Codepen](https://codepen.io/lee-wei-hong/pen/gOKEawJ?editors=1111)|
|J_u_d_y#5993|[CodePen](https://codepen.io/J_u_d_y/pen/JjBWNxZ?editors=1111)|
