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

# 🏅 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／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/qBJgpNd)|
| 2 | Eden.C#9359 | [Codepen](https://codepen.io/iseden/pen/RwevxJL)|
| 3 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/vYVbpQe) |
| 4 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/ExdrQWW) |
| 5 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/oNamEZp?editors=1010) |
| 6 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/KKGJQQd?editors=1010) |
| 7 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/abRXqaV?editors=1011) |
| 8 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/PoyVQVM) |
| 9 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/MWPLVav) |
| 10 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/OJBdvgN) |
| 11 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/wvYNjvr) |
| 12 | 姜承#8204 | [Codepen](https://codepen.io/gahwa17/pen/wvYNjvr)|
| 13 | 辣椒#1002 |[Codepen](https://codepen.io/chilichen118/pen/vYVbrdz)|
| 14 | N0c7iluc3n7#4390 |[Codepen](https://codepen.io/huang-yu-cheng/pen/RwevBJP)|
| 15 | wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/wvYNEey?editors=1011)
| 16 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/eYPxQYE)
| 17 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/oNamQZV?editors=1111)
| 18 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/qBJPWag)
| 19 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/PoyVVpx)
| 20 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/VwEggdB)
| 21 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/GRYzaNB?editors=1011)
| 22 | Jennifer Chuang#3937 |[Codepen](https://codepen.io/yujhen/pen/gOBqBjE?editors=1111)|
| 23 | David0799 #4415 |[Codepen](https://codepen.io/David0799/pen/dygaEqK)|
| 24 | Uli#1946 |[Codepen](https://codepen.io/uli1313/pen/NWOoZNN)|
| 25 | peihsuan#6315 |[Codepen](https://codepen.io/peihsuanlai/pen/GRYzadP)|
| 26 | 翔.#0859 |[Codepen](https://codepen.io/energy95272z/pen/OJBqVeK?editors=1012)|
| 27 | 東東#5015 |[Codepen](https://codepen.io/wearymask/pen/zYmbqgE)|
| 28 | henrykgb#5749 |[Codepen](https://codepen.io/henrymorgan666/pen/KKGENRw)
| 29 | yoyo#1003 |[Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/MWPxmXy)|
|30|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/eYPXezE)
|31| DeLi#8324|[CodePen](https://codepen.io/delichaomoon/pen/WNamYeb)
|32| 鄭舜仁#6606|[CodePen](https://codepen.io/randomno/pen/YzJgReM)
|33| K（アギルダー）#0386|[CodePen](https://codepen.io/klay376014/pen/MWPxZOz)
|34|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/dygrrda)|
|35|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/KKGYKwV)|
|36|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/ZEqZBRG)|
|37|jun777#2468|[Codepen](https://codepen.io/js18151102/pen/wvYZQbM)|
|38|喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/KKGYOMv)|
|39|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/BaqEXoK)|
|40|JasonChang#7847|[Codepen](https://codepen.io/jsonChangJava/pen/PoyvwLm?editors=0100)|
|41|雲漢#5319|[codepen](https://codepen.io/keon981/pen/eYPaEbP?editors=1011)
|42|Kulimusoda#2785|[codepen](https://codepen.io/yuch3n_chen/pen/YzJbrOx?editors=1011)
|43|Snadra#1987|[Codepen](https://codepen.io/mlqmhltg/pen/zYmVLaN)|
|44|townyuan#2653|[Codepen](https://codepen.io/townyuan/pen/BaqgGRq)|
|45|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/VwVZNpQ)|
|46|liam9930#4129|[Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/poQoyNe?editors=0010)|
| 47 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/mdQVpKO) |
| 48 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/gOQWjpO) |
| 49 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/qBQjzoQ) |
| 50 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/WNYzgvL) |
| 51 | hoyiiiii | [Codepen](https://codepen.io/hoyii/pen/ByBjLBK?editors=1011) |