---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> JS - DOM

# 🏅 JS 任務 Day19 - DOM 選擇器
JavaScript 中有一個強大的選擇器 querySelector，它會回傳它在網頁 document 中所找到的 **「第一個」** 符合設定的元素，在 HTML 中由上而下開始找。

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

### querySelector 選取方式

1. 可以直接選取 HTML 元素

HTML:

    <!-- querySelector 只會回傳第一個符合選取條件的元素 -->
    <p>我被 el 選到了</p>  
    <p>我沒有被選到</p>

JS:

    const el = document.querySelector("p");

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

HTML:

    <p id="targetID">我被 elementID 選到了</p>
    <p class="targetClass">我被 elementClass 選到了</p>

JS:

    const elementID = document.querySelector("#targetID");
    const elementClass = document.querySelector(".targetClass");

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

HTML:

    <div id="targetID">
      <p>我被 elementID 選取到了</p>
    </div>
    <!-- 以下是 span 被選取到 -->
    <div class="targetClass">
      <p>
        <span>我被 elementClass 選取到了</span>
      </p>
    </div>

JS:

    const elementID = document.querySelector("#targetID p");
    const elementClass = document.querySelector(".targetClass > p > span");

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

HTML

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

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

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

## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答：
const targetID = document.querySelector("#targetID");
const targetClass = document.querySelector(".targetClass");
const targetBElementP = document.querySelector(".targetBElementP p");
-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | han | [Codepen](https://codepen.io/iamHanCheng/pen/gbbVoLN?editors=1010) |
| 2 | dean | [Codepen](https://codepen.io/ch933114/pen/MYYNrMQ?editors=1011) |
|3|JHT|[Codepen](https://codepen.io/juanht/pen/EaaqQYO?editors=1011)|
| 4 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/WbbVzdW?editors=1011) |
| 5 | B | [Codepen](https://codepen.io/Babel777/pen/NPPQyrv) |
| 6 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/myyNLBZ?editors=1111) |
| 7 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/gbbVoya?editors=1010) |
| 8 | pastor | [Codepen](https://codepen.io/peter_hung/pen/dPPxjEm) |
| 9 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/xbbvyGM) |
| 10 | 7Lun | [Day19-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/myyNQMx?editors=1111) |
| 11 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/RNNXxRv) |
| 12 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/qEEegWv?editors=1011) |
| 13 | kelsohhouse | [Codepen](https://codepen.io/Kelson-House/pen/gbbVZmN?editors=0011) |
| 14 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/raaXbJY?editors=1111) |
|15|蛋殼|[Codepen](https://codepen.io/weybrian/pen/qEEewpy)
|16|Hawkeye Lin|[Codepen](https://codepen.io/long-long/pen/JooggRp)
|17|Leonard|[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/EajYaYm)
|18|jingle0900|[Codepen](https://codepen.io/pen/?editors=1011)
|19|力文|[Codepen](https://codepen.io/liwenchiou/pen/ZYGzKvM?editors=1010)
| 20 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/wBawjvO?editors=1011) |
| 21 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/KwpPRqV) |
| 22 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/dPoyEVr?editors=1010) |
|23|小趴|[Codepen](https://codepen.io/papa2415/pen/JjqKLNX)|
| 24 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/xbGxQoO) |
| 25 | Esther | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/EajaJJW?editors=1111) |
| 26 | xiaocai_97765 | [Codepen](https://codepen.io/dupre55667788/pen/EajNjvM?editors=1010)
| 27 | ninii | [Codepen](https://codepen.io/niiniiii/pen/WbvjyEv?editors=1111)
| 28 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/emNRpXQ?editors=1011) |
| 30 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/PwqJPEY?editors=1111)|
| 31 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/gbaYzzg)|

<!--【快速複製】
| num | user | [Codepen]() |
-- >