---
# System prepended metadata

title: "\U0001F3C5 Day 15 - textContent"
tags: [JS 直播班 - 2025 秋季班]

---

# 🏅 Day 15 - textContent

請同學依照下方觀念練習，並回答問題。

### textContent 觀念複習

1. 透過 textContent 可以取得 DOM 元素內的 「純文字內容」，HTML 會被忽略（請注意「純文字內容」有包含換行以及空格）
    HTML:
    ```htmlembedded=
    <div class="targetClass">
      <p>取得這個 p 標籤的純文字</p>
    </div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass p");
    console.log(targetClass.textContent);
    ```
    結果（以下為 CodePen console 的結果）:
    ![](https://i.imgur.com/K2kQogT.png =300x)


2. 可以透過 textContent 替換 DOM 元素內的內容，需要注意以下幾個重點:
    - 原先的所有內容都會被清空（包含 HTML 標籤）
    - 新的內容將被瀏覽器解析成「純文字」，不會保留 HTML 標籤的特性。

    HTML:
    ```htmlembedded=
    <!--  以下的 p 標籤會被清空，替換成純文字 "<h3>修改後的內容</h3>" -->
    <div class="targetClass">
      <p>替換這個 p 標籤</p>
    </div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    targetClass.textContent = "<h3>修改後的內容</h3>";
    ```
    結果：
    (網頁渲染出的畫面)
    ![](https://i.imgur.com/MnrUGTh.png)
    (修改後的 HTML 結構)
    ![](https://i.imgur.com/MPM2pVi.png)


3. textContent 可以跟變數混合使用

    HTML:
    ```htmlembedded=
    <div class="targetClass"></div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    let score = 100;
    targetClass.textContent = `<p>小華的成績為 ${score} 分</p>`;
    ```

    結果：
    (網頁渲染出的畫面)
    ![](https://i.imgur.com/GH77RQV.png)

    (修改後的 HTML 結構)
    ![](https://i.imgur.com/ZrGcOr2.png)

問題
---
請練習用 querySelector 取得以下元素，使用 textContent 將 p 標籤內的文字替換為「現在是綠燈！」，並嘗試帶入 `trafficSign` 變數。

HTML
```htmlembedded=
<p class="trafficAlert">現在是紅燈！</p>
```

JS
```javascript=
let trafficSign = "綠燈";
```


<!-- 解答：  

```javascript=
let trafficSign = "綠燈";
const trafficAlert = document.querySelector(".trafficAlert");
trafficAlert.textContent = `現在是${trafficSign}！`;
```
-->