---
# System prepended metadata

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

---

# 🏅 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 / 答案 |
| --- | ----- | ----- |
|  01   |  voke     | [CodePen](https://codepen.io/FiSi-the-lessful/pen/BaXZQZZ) | 
|  02   |  david1819     | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/qBexaOB) | 
|  03   |  嚼勁先生     | [CodePen](https://codepen.io/James520284/pen/NWQyRbY) | 
|  04   |  Lotte     | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/QWeQKQZ?editors=1011) |
| 05 |brucelee0629| [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/PoMQbZy?editors=1011) | 
| 06 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/JjgpEYB?editors=1011) | 
| 07 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/ExqQZEd) | 
| 08 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/RwXQGEj?editors=1011) | 
| 09 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/dyxdvJp?editors=1011) | 
| 10 | tim | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/LYwQyOe) | 
|11|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/XWvZgXV?editors=1011)|
|  12   |    Ariel   | [CodePen](https://codepen.io/ariel0510/pen/bGXLRRw?editors=1011) |
|  13   |    Mike   | [CodePen](https://codepen.io/mike2049/pen/yLmvXWj?editors=1011) |
|   14  |   KUN.    | [CodePen](https://codepen.io/barry91205/pen/NWQywWG?editors=1010) | 
|   15  |   jimmy.0706    | [CodePen](https://codepen.io/JimmyMao/pen/bGXLLvP?editors=1012) | 
| 16 | Mos | [CodePen](https://codepen.io/mos25399/pen/bGXLLoy?editors=1010) |
| 17 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/NWQyYvR?editors=1111) |
| 18 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/vYodReo) |
| 19 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/GRVQxdJ?editors=1111) |
|  20   | Celine       | [CodePen](https://codepen.io/szuning/pen/wvVymxo) | 
|  21   | Sonia       | [CodePen](https://codepen.io/YUJOU/pen/NWQyBPG?editors=1011) | 
|  22   |   610    | [CodePen](https://codepen.io/YI-LING-LIU/pen/QWeQVLO) | 
|  23   |  .tsz_ying   | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/MWNQEJw?editors=1012) | 
|   24  |  JIA     | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/WNVMamb?editors=1011) | 
| 25 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/poMaQwP) |
| 26 | ABow_Chen | [CodePen](https://codepen.io/fred39392001/pen/oNKqNMO) |
| 27 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/ExqExpe) |
| 28  |  雪粒  | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/oNKqgvK) | 
|29|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/QWemNjY) |
| 30 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/mdNxWGm?editors=1111) | 
| 31 | yuling | [CodePen](https://codepen.io/yu-ling-peng/pen/eYqMGyp?editors=1011) | 
| 32 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/poMaEwQ) |
| 32 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/oNKqRYB?editors=1011) |
|33|Tatsu| [CodePen](https://codepen.io/chindesu0207/pen/YzmLYMq) | 
|34|陳小廷| [CodePen](https://codepen.io/ting1124/pen/xxvjmZy?editors=1012) | 
|35|joylu0902| [CodePen](https://codepen.io/joylu0902/pen/GRVdzqE) |
|  36   |   chris    | [CodePen](https://codepen.io/chris-chen-the-selector/pen/YzmLoZv?editors=1010) |
|37|Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/yLmELaN?editors=1010) | 
|38|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/eYqKryM?editors=1011)|
| 39 |  Emma  | [CodePen](https://codepen.io/Emma0919/pen/rNXrBRB) | 
| 40    |jerry_66983       | [CodePen](https://codepen.io/Barry-C/pen/GRVBrMG?editors=1011) | 
| 41    |蘑菇星星       | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/QWeBvYV?editors=1012) | 
| 42    |Jainee       | [CodePen](https://codepen.io/Jainee0110/pen/vYoamqm) | 
| 43    |野鴿       | [CodePen](https://codepen.io/HoshinoSyouta/pen/WNVKKZm?editors=1012) |
| 44 |  Ed Huang  | [CodePen](https://codepen.io/yide1986/pen/JjgBmGV) | 
| 45 |  charlottelee | [CodePen](https://codepen.io/char849/pen/wvVxpGw) |
| 46 |  kaka_945 | [CodePen](https://codepen.io/kay945/pen/zYgJYPr) | 
|47|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/KKOxpxe?editors=1011)|
| 48 |  JRz | [CodePen](https://codepen.io/JRZHENG/pen/PoMdGWg?editors=1111) | 
| 49 |  Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/oNKaXzV?editors=1011) |
| 50 |  Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/ExqdoVg?editors=1111) |
| 51 |  iamcan | [CodePen](https://codepen.io/uhnxswdq-the-typescripter/pen/rNXqJEQ) |
| 52 | Glen_69515 | [codePen](https://codepen.io/glenyaochih/pen/BaXGoRd?editors=1111)
| 53    | alec1203      | [CodePen](https://codepen.io/soloayaya/pen/rNXqrga?editors=1112) |
| 54    | Seris      | [CodePen](https://codepen.io/Dale-Chien/pen/YzmRYYY?editors=1011) |
| 55    | KOMATSU PEI      | [CodePen](https://codepen.io/Komatsu2021/pen/dyxamjx?editors=1011) |
|56|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/BaXbXvm?editors=1011) | 
| 57 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/yLmrvVw?editors=1011) | 
| 58 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/azooWJa?editors=1011) |
| 59 | haojig | [Codepen](https://codepen.io/hjxu/pen/KwPKoJr) |
| 60 | Chuang |[CodePen](https://codepen.io/uidoytjq-the-solid/pen/RNbYMPY?editors=1011) |


<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->