---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 JS 任務 Day20 - 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／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/eYaZezm) |
| 02 | han | [Codepen](https://codepen.io/iamHanCheng/pen/NWVNJwo?editors=1111) |
| 03 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/oNRxVpe?editors=1011) |
| 04 | jerry | [Codepen](https://codepen.io/sony791210/pen/PovNLQd) |
| 05 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/WNBwmyB) |
| 06 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/WNBwWbN) |
| 07 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/jOoqRbb?editors=1112) |
| 08 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/MWdyROm?editors=1011) |
| 09 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/YzbqMJb?editors=1111) |v
| 10 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/pomymrV?editors=1012) |
| 11 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/RwmamLR) |
| 12 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/gOJrJqx?editors=1010)|
| 13 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/JjqXQZN) |
| 14 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/RwmRboW?editors=1111) |
| 15 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/oNRLvQb) |
| 16 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/jOorPvK) |
| 17 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/ZENOOBg) |
| 18 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/XWwKROQ?editors=1011) |
| 19 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/zYQBzmB) |
| 20 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/RwmRgqM?editors=1010) |
| 21 | Emma | [Codepen](https://codepen.io/huang_L/pen/ExzybxY) |
| 22 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/YzbWeWK) |
| 23 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/JjqKLNX)|
| 24 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/RwmRBog?editors=1011) |
| 25 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/dyEXBWO?editors=1111) |
| 26 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/zYQBGNy) |
| 27 | 知夜 | [Codepen](https://codepen.io/XiaoXiaTian2/pen/eYadOmy) |
| 28 | boin | [Codepen](https://codepen.io/boinji/pen/ExzgWpw) |
| 29 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/OJYRjRr) |
| 30 | JY | [Codepen](https://codepen.io/jylee0805/pen/WNBxKam?editors=1111) |
| 31 | kawa | [Codepen](https://codepen.io/z83xji6/pen/YzbGmMJ?editors=1011) |
| 32 | macihunang | [Codepen](https://codepen.io/macy1215/pen/VwOmZjg) |
| 33 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/XWwNqOp) |
| 34 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/ExzbNmr) |
| 35 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/mdYgXYY?editors=1111) |
| 36 | maru3096 | [codepen](https://codepen.io/deamru/pen/JjQeRGV) |
---
<!--【快速複製】
| num | user | [Codepen]() |
-- >