# 🏅 3/15 (一) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

querySelector 觀念複習
---
這週我們學到了 querySelector 這個強大的選擇器 ([課程章節參考](https://courses.hexschool.com/courses/1289881/lectures/30768815))
它會回傳它在網頁 document 中所找到的 **「第一個」** 符合設定的元素，在 HTML 中由上而下開始找。([課程章節參考](https://courses.hexschool.com/courses/1289881/lectures/30768830))

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");
-->