---
# System prepended metadata

title: "\U0001F3C5 JS 任務 Day20 - DOM 選擇器"
tags: [軟體工程師體驗營 - 2024]

---

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

# 🏅 JS 任務 Day20 - DOM 選擇器
JavaScript 中有一個強大的選擇器 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>
```


## 回報流程

1. 將答案貼在 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  | 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]() |
-- >