---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:--------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| Mattie | [CodePen](https://codepen.io/mattielin/pen/XWONvBb?editors=1111) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/GRzNVed) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/eYxBqxN?editors=1011) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/PoVbMvd?editors=1010) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/poGRzoo?editors=0010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/OJdWLVr) |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/LYqxPpz) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/VwgjXGp) |
| yuling | [codepen](https://codepen.io/igzdflpu/pen/BaMpBoM) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/xxMgKZr) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/WNPReON) |
| Ivy | [CodePen](https://codepen.io/Irene-Ke/pen/eYxgOPR?editors=1010) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/VwgPZEV?editors=1011) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/rNPjByj?editors=1111) |
| Andy | [CodePen](https://codepen.io/andy31342/pen/RwvKwGb?editors=1111) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/mdvRddN?editors=1011) |
| dora | [CodePen](https://codepen.io/dorayu/pen/RwvKwRb?editors=1011) |
| ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/BaMpapz?editors=1010) |
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/bGzgGxR?editors=1011) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/LYqxYBw) |
| 荷菓かのり | [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/yLZgLjK?editors=0001https://codepen.io/oogxwkvw-the-builder/pen/yLZgLjK?editors=0001https://codepen.io/oogxwkvw-the-builder/pen/yLZgLjK?editors=0001) |
| Eden | [Codepen](https://codepen.io/iseden/pen/jOdyEPp) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/BaMpyKJ) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/gOqgbPR?editors=1111) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/bGzgNgM?editors=1011) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/qBgREYa?editors=1112) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/jOdyEKJ?editors=1011) |
| RX00 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/dyaNPgR?editors=1011) |
| CPing | [CodePen](https://codepen.io/CPing/pen/mdvRygx?editors=1111) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/oNmBXgG?editors=1010) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/WNPRvvq) |
| Rxzan | [CodePen](https://codepen.io/Tzuru-Chen/pen/rNPjVjW) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/BaMpNqB) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/zYeNGMP) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/bGzgdPE?editors=1011) |
| hsuanlee1084 | [CodePen](https://codepen.io/hsuanlee1024/pen/oNmBXKQ?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/oNmYwgO?editors=1112) |
| (奔跑吧)GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/PoVWZYm?editors=1111) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/bGzgpbz) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/abXpNZW?editors=1111) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/poGRywj) |
| celinelinnn | [CodePen](https://codepen.io/celinephoebe/pen/poGRyWg) |
| gebyman | [CodePen](https://codepen.io/gebyman/pen/BaMpKMa?editors=0011) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/XWOprBa) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/QWYdErq?editors=1111) |
| smalljie | [Codepen](https://codepen.io/smalljie/pen/eYxgzLL) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/JjxEKwQ?editors=1111) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/BaMpLeq) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/wvNgoPL) |
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/rNPjyOR) |
| Allen | [CodePen](https://codepen.io/genesynthesis/pen/xxMgKZr?editors=1111) |
| Cosmos | [CodePen](https://codepen.io/violet7755/pen/yLZgbBB) |
| Ching | [CodePen](https://codepen.io/tzuchingg/pen/OJdWgmM?editors=1011) |
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/gOqgvrd) |
| JasonFu | [CodePen](https://codepen.io/jie-Fu/pen/qBgRxop) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/mdvRxbY) |
| Oria | [CodePen](https://codepen.io/kajing/pen/poGRLrr?editors=0011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/VwgPBxo?editors=0011) |
| phyllis | [CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/MWLJapr) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/mdvRzYo?editors=1011) |
| Vivian2857 | [CodePen](https://codepen.io/uojbohed-the-solid/pen/gOqgyxR?editors=1010) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/WNPRqJp?editors=1012) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/GRzWqgL?editors=1011) |
| Ccccc | [CodePen](https://codepen.io/CyreneTsai/pen/qBgrRrM?editors=1011) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/eYxgdPY?editors=1111) |
| Jerry | [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/YzBZQzJ?editors=1010) |
| 阿賀#3700 | [CodePen](https://codepen.io/sungho/details/eYxvMOg) |
| xiaokui_71292 | [CodePen](https://codepen.io/pen?template=KKJWbao) |
| 郭芙蘭#6374 | [CodePen](https://codepen.io/flora_Kuo/pen/XWOMQKy?editors=1011) |
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/rNPyMGb) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/qBgmWrq) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/jOdmYyG?editors=1010) |
| Joy-chiang | [CodePen](https://codepen.io/dcthmcje-the-reactor/pen/BaMRrLe?editors=1010) |
| jiayu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/dyaWBMd?editors=1111) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/RwvVzyv?editors=1012) |
| 小廷 | [CodePen](https://codepen.io/uyxkiake-the-selector/pen/PoVmrar?editors=1011) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/YzBQpdr?editors=1011) |
| 白夜 | [CodePen](https://codepen.io/Wei903/pen/eYxRRMg?editors=1011) |
| davidTT | [CodePen](https://codepen.io/David-Tsai/pen/QWYgrea?editors=1011) |
| _shun0130 | [CodePen](https://codepen.io/koba60052ww/pen/PoVjLjx?editors=1011) |
| shcopy | [CodePen](https://codepen.io/shcopy/pen/PoVJRbQ) |
| nikkita_3544 | [Codepen](https://codepen.io/vanessa7259/pen/GRzQRjZ?editors=0010) |
| Iris | [Codepen](https://codepen.io/iris831206/pen/XWOZaBd?editors=1111) |
| ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/BaMYYEo)|
| Daylily | [Codepen](https://codepen.io/daylily/pen/JjxpaWX)|
| jimmy.0706 | [Codepen](https://codepen.io/WeiJun-Mao/pen/bGzLOyZ?editors=1011)|
| Hank._.z | [Codepen](https://codepen.io/linoiaby-the-sans/pen/yLZjKPX?editors=1111)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/oNmyvZW)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/VwgBVay)|
|sunny_08149|[Codepen](https://codepen.io/vjgpcfpk-the-builder/pen/bGzjzpY)|
|bf_tsai|[Codepen](https://codepen.io/BF-Tsai/pen/XWOPJgE?editors=1010)|
|NathanJames|[Codepen](https://codepen.io/ufo060204/pen/ZEwqzBj)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/ExrdBQP?editors=1011)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/yLZQReb) |
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/abXPLZY)|
| 雪維 | [Codepen](https://codepen.io/Shawey/pen/MYgXXqb) |