# 🏅 DAY21 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

querySelector 觀念複習
---
這週我們會學到 querySelector 這個強大的選擇器
它會回傳它在網頁 document 中所找到的 **「第一個」** 符合設定的元素，在 HTML 中由上而下開始找。

querySelector 的寫法相當多元，以下就來整理一些課堂上有教到的寫法:

1. 可以直接選取 HTML 元素

<!-- querySelector 只會回傳第一個符合選取條件的元素 -->
<p>我被 el 選到了</p>  
<p>我沒有被選到</p>

let el = document.querySelector("p");

2. 可以選取帶有 id 或 class 的元素

<p id="targetID">我被 elementID 選到了</p>
<p class="targetClass">我被 elementClass 選到了</p>

let elementID = document.querySelector("#targetID");
let elementClass = document.querySelector(".targetClass");

3. 可以用類似 CSS 的撰寫方式選取

<div id="targetID">
  <p>我被 elementID 選取到了</p>
</div>
<!-- 以下是 span 被選取到 -->
<div class="targetClass">
    <p>
        <span>我被 elementClass 選取到了</span>
    </p>
</div>

let elementID = document.querySelector("#targetID > p");
let elementClass = document.querySelector(".targetClass > p > span");

問題
---
請同學練習用 querySelector 選取元素，並依照以下程式碼註解的要求撰寫 JS

HTML

<!-- 第一題，請選取以下標籤 -->
<p id="targetID">請選取我</p>

<!-- 第二題，請選取以下標籤 -->
<p class="targetClass">請選取我</p>

<!-- 第三題，請選取以下標籤 -->
<div class="targetElementP">
  <p>請選取我</p>
</div>

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


<!-- 解答
let targetID = document.querySelector("#targetID");
let targetClass = document.querySelector(".targetClass");
let targetElementP = document.querySelector(".targetElementP p");
-->

| Slack | CodePen |
|:---------------:|:------------------------------------------------------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/vYJjOKV |
| Iris Huang | https://codepen.io/ythuang/pen/YzxLXGO |
| Genos | https://codepen.io/pb220416/pen/PoKeqWv |
| 傅劍軒 | https://codepen.io/seonkuraito/pen/OJjZVeM |
| YC | https://codepen.io/YCLu/pen/xxLjGgp |
| CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/bGrMdRN |
| lumei | https://codepen.io/l_umei/pen/WNEJvXr |
| Jun Ting Lin | https://codepen.io/jake1155/pen/ZEJoGJe |
| 米米 | https://codepen.io/Jameshsu0407/pen/MWvGwVm?editors=1010 |
| Arista | https://codepen.io/arista-hsieh/pen/JjyvdBB |
| jojoy | https://codepen.io/jojoy/pen/xxLjGaz?editors=1010 |
| Sam | https://codepen.io/sam-hsu/pen/rNzvVQp |
| Bonnie | https://codepen.io/bonnieli1414/pen/YzxLXQR?editors=0010 |
| Aaron Tu | https://codepen.io/aarontu/pen/bGrMdzp |
| AndyHuang | https://codepen.io/HsuHuaHuang/pen/vYJjObq |
| 連小艾 | https://codepen.io/bolaslien/pen/KKvRpOq |
| 劉維倫 | https://codepen.io/lun0223/pen/wvqjKaz?editors=1010 |
| Lai | https://codepen.io/co_lai/pen/YzxLXJM?editors=1111 |
| POPEYE | https://codepen.io/popeye_ux/pen/xxLjwZm |
| Tim Lin | https://codepen.io/TimmyLin/pen/ExvLVWG?editors=1111 |
| 雪莉 | https://codepen.io/utshang216/pen/porVjPa |
| zyc | https://codepen.io/zy_c/pen/MWvGapG |
| Pei Ying | https://codepen.io/Pei-Ying/pen/MWvGavX?editors=1011 |
| 洋蔥 | https://codepen.io/oikdkmxq-the-looper/pen/GRvdpMq?editors=1010 |
| Gill | https://codepen.io/Gill-Chin/pen/XWaqmay?editors=1011 |
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=1111 |
| Cheng Pei-hsuan | https://codepen.io/PaCheng/pen/zYdGKpO |
| 鄭安志 | https://codepen.io/lwmtsgek/pen/PoKePRp?editors=1011 |
| 群嘉 | https://codepen.io/efzdamnp-the-lessful/pen/oNedjyg |
| Yunei | https://codepen.io/Yunei/pen/porVjVK |
| AKI | https://codepen.io/akichen27/pen/eYErpLb |
| ZY Hsu | https://codepen.io/zihyin/pen/zYdjvmQ?editors=1010 |
| 大衛 | https://codepen.io/exnsrpjc/pen/dyzeowa?editors=1011 |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/jOLxbjv?editors=1112 |
| kk | https://codepen.io/potatokaka/pen/NWvMxGB |
| 張喆 | https://codepen.io/wow767t/pen/qBXYbZZ |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/xxLjZpE?editors=1011 |
| Bean Huang | https://codepen.io/Beanhuang/pen/Vwzxeqy |
| kevinhes | https://codepen.io/kevinhes/pen/NWvMxVV?editors=1012 |
| 有廖先生(rain) | https://codepen.io/billpop741/pen/OJjZMvo |
| YuriT | https://codepen.io/wenfisht/pen/abyGNzw |
| Bella Shya | https://codepen.io/BellaXie/pen/abyGNWV?editors=1010 |
| Elaine Liu | https://codepen.io/elaine7598/pen/VwzxvjZ?editors=0010 |
| PeggyTsai | https://codepen.io/pei-chi-tsai/pen/eYErZbe?editors=0010 |
| Chia Chi | https://codepen.io/ClaraChen/pen/RwZyaem?editors=1111 |
| Yashien Lin | https://codepen.io/YashienLin/pen/XWaqdvq?editors=1010 |
| Jie Du | https://codepen.io/qgqonost-the-flexboxer/pen/ExvLyxe?editors=1111 |
| phi | https://codepen.io/aiya861202/pen/eYEmVjR |
| LTL | https://codepen.io/ltlin93/pen/jOLxrRp |
| Phil | https://codepen.io/ctkeftjp-the-animator/pen/NWvMGWd |
| Hsiang | https://codepen.io/chao20211/pen/ExvLZmG |
| 陳暐中 | https://codepen.io/wei-z/pen/WNEJjaw?editors=1112 |
| Trista | https://codepen.io/trista6140/pen/GRvdmwV |
| Steven Chan | https://codepen.io/Steven1220/pen/NWvMvNz?editors=1010 |
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/LYjmjbZ?editors=0011 |
| 小K | https://codepen.io/kelen1995/pen/BadxdGG |
| 阿和 | https://codepen.io/shnny/pen/bGrMryZ?editors=1011 |
| Van.S | https://codepen.io/fbacojji-the-selector/pen/yLojzNY?editors=1011 |
| Louis | https://codepen.io/Louis164156/pen/rNzvGqG |
| 蔣秉彣 | https://codepen.io/the-pierre/pen/KKvRXOm |
| Yunyi | https://codepen.io/yunyi12374/pen/ZEJbKVW |
| 許閔翔 | https://codepen.io/oupbzfxq-the-scripter/pen/YzxLYvr |
| danny123 | https://codepen.io/binlandz123/pen/xxLjewx?editors=0010 |
| Riley | https://codepen.io/jjpxbprd/pen/MWvXgVb |
| Jocelyn | https://codepen.io/enjoyful/pen/mdMKdaE?editors=1011 |
| 肉魚 | https://codepen.io/zoechen13/pen/PoKaGzK |
| 三隻小貓 | https://codepen.io/bagelover/pen/XWaYMRL |
| Jun Hua | https://codepen.io/ydsyvkph/pen/mdMKMop |
| Booker | https://codepen.io/bookbasketball/pen/wvqXreZ |
| ZOE WU | https://codepen.io/Zoechiueh/pen/jOLKdaN?editors=1011 |
| Mingyo | https://codepen.io/Nick-Yo/pen/ZEJRPMx?editors=1011 |
| Yof | https://codepen.io/yangyof/pen/wvqxwyZ?editors=1011 |
| Calon | https://codepen.io/Calon0118/pen/bGrjEqY? |
| YOYO | https://codepen.io/lumedkle/pen/dyzjJxO?editors=1111 |
| Anna | https://codepen.io/kycrleao/pen/porZabm?editors=1011 |
| Gui | https://codepen.io/guitimliu/pen/abyjGXb |
| Tina | https://codepen.io/Tina0721/pen/xxLJJqW?editors=1111 |
| 柯勝華 | https://codepen.io/Chill-Nick/pen/NWvBEyN |
| Sandy | https://codepen.io/Sandy_L/pen/YzxjBYE?editors=1011 |
| Jasper | https://codepen.io/li-jasper/pen/qBXyGXR |
| 艾瑞克 | https://codepen.io/ericla/pen/LYjJZBg?editors=0011 |
| Vicky Kao | https://codepen.io/vicky03035/pen/vYJzWzP |
| zaii | https://codepen.io/ivy2846357/pen/bGrmdoK?editors=0010 |
| 鉦勝 | https://codepen.io/atckmax823/pen/oNeaexJ?editors=1011 |
| kailun | https://codepen.io/Kailun/pen/VwzEyeg |
| 陳sam | https://codepen.io/euldpliv/pen/gOxByPV |
| Joey | https://codepen.io/Joey-Chen/pen/rNzqgNQ |
| lingxuan | https://codepen.io/penglingxuan/pen/QWMJyPM |
| Alvin | https://codepen.io/Alvin20201116/pen/BadGVpR?editors=1011 |
| 乃萱 | https://codepen.io/nainaikuo/pen/NWveovj?editors=1111 |
| Irene Wang | https://codepen.io/irene-wang-the-looper/pen/ZEJwLbV |
| Huan Pei | https://codepen.io/patrickrrr007/pen/oNemwzb?editors=1011 |
| 吐司 | https://codepen.io/malolulu/pen/WNEPVZq |
| Ching | https://codepen.io/Jaimedede/pen/Jjyzzeo |
| debby yeh | https://codepen.io/bhliyoup/pen/porBbrL?editors=1111 |
| Aya | https://codepen.io/NoNameNote/pen/VwzOrZq |
| Juno Li | https://codepen.io/Juno026/pen/GRvaYBP?editors=1011 |
| 傑瑞 | https://codepen.io/auatwood909815/pen/abygoxV?editors=1011 |
paul|https://codepen.io/printfootya/pen/qBXzOOK?editors=1111|
|Jean Chiang|https://codepen.io/jeanchiang1221/pen/OJjegGX|
|Zooey Cheng|https://codepen.io/noraneko0430/pen/RwZXNZa?editors=1010
|Hamaji| https://codepen.io/hamajibashi/pen/KKXPmZb |
|Jeff| https://codepen.io/jeff-cheng/pen/poWjYeV?editors=1111 |
|ShinyChen|https://codepen.io/shinychen/pen/BawYLXd |
Keep|https://codepen.io/keep-/pen/mdBzjwd?editors=1111|