# 🏅 Day 14 - 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>

<!-- 解答：

const targetID = document.querySelector("#targetID");
const targetClass = document.querySelector(".targetClass");
const targetBElementP = document.querySelector(".targetBElementP p");
-->