# 🏅 Day 21 - DOM 選擇器

這週我們學到 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>

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

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]() |
-->