---
# System prepended metadata

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

---

---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 22 - 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 = "綠燈";
```

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

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




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
|pinyi_9|[codepen](https://codepen.io/Wpypy/pen/XWOpZrX?editors=1010)|
|lychee_kk|[codepen](https://codepen.io/kakakala/pen/dyaNdyz)|
|詹姆士|[codepen](https://codepen.io/z111048/pen/ZEwLrGG)|
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/jOdyZrg) |
|CPing|[Codepen](https://codepen.io/CPing/pen/ExrZQXW)|
|Eden|[Codepen](https://codepen.io/iseden/pen/abXpqLw)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/BaMpYJe)|
|小夏|[Codepen](https://codepen.io/michaelhsia/pen/JjxEppO)|
|yuan!| [CodePen](https://codepen.io/townyuan/pen/qBgRxzK) |
|Helen| [CodePen](https://codepen.io/milkteamonster/pen/eYxgMNG?editors=1010) |
|JasonFu| [CodePen](https://codepen.io/jie-Fu/pen/bGzgvBe?editors=1010) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/bGzgvGV) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/qBgRojL) |
| Oria | [CodePen](https://codepen.io/kajing/pen/eYxgMyr) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/JjxELMx?editors=1010) 
| Allen | [CodePen](https://codepen.io/hlctw/pen/ZEwLxKv?editors=1111)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/xxMgWzM)|
| dora | [CodePen](https://codepen.io/dorayu/pen/LYqxQXm) |
| Andy | [CodePen](https://codepen.io/andy31342/pen/gOqgzLR?editors=1111) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/oNmBdex?editors=1111) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/WNPRJga?editors=1111) |
| 依依| [CodePen](https://codepen.io/Rita-Yang/pen/XWOpqOb?editors=1011) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/BaMpVaq) |
| Fabio20 | [CodePen](https://hackmd.io/-KuEWElBSwiJ1ZNVGWjHZg) |
| Ivy | [CodePen](https://codepen.io/Irene-Ke/pen/eYxgjVr) |
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/jOdypZw) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/ZEwLjVR?editors=1111) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/poGRZYL?editors=1010) |
| ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/qBgRyyw?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/VwgjXGp) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/yLZgxgQ) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/yLZgxyq) |
| gebyman | [CodePen](https://codepen.io/gebyman/pen/BaMpPvp?editors=1011) |
| Cosmos | [CodePen](https://codepen.io/violet7755/pen/gOqgdjo) |
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/LYqxJvx)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/yLZgREO)|
| phyllis | [CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/abXpRXV) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/BaMpqgB?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/mdvRQWb) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/KKJarZv) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/abXpQaP) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/ZEwLorN?editors=1010) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/rNPjQEQ?editors=1010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/ExrZGYM) |
| 荷菓かのり| [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/MWLJZLM?editors=1011) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/yLZgGrd?editors=1010) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/PoVWVEV?editors=1011) |
| smalljie | [CodePen](https://codepen.io/smalljie/pen/BaMpMgB) |
| Vivian2857 | [CodePen](https://codepen.io/uojbohed-the-solid/pen/JjxEVrd) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/ZEwLNMp) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/eYxgwYR) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/ZEwLdQy) |
| hsuanlee1084 | [CodePen](https://codepen.io/hsuanlee1024/pen/BaMpgMQ?editors=1010) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/BaMWjVY?editors=1010) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/rNPyOEZ) |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/poGeERZ) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/jOdBrqr?editors=1011) |
| Ccccc | [CodePen](https://codepen.io/CyreneTsai/pen/KKJWazg?editors=1010) |
|  Jerry | [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/vYbxZLb?editors=1010) |
|  Ching | [CodePen](https://codepen.io/tzuchingg/pen/BaMWmyX?editors=1010) |
|  runweiting | [CodePen](https://codepen.io/weiting14/pen/QWYpadQ) |
|  ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/eYxvyxw?editors=1111) |
|  Mattie | [CodePen](https://codepen.io/mattielin/pen/OJdpEYG) |
| xiaokui_71292| [CodePen](https://codepen.io/pen?template=OJdprmp)|
| 郭芙蘭#6374| [CodePen](https://codepen.io/flora_Kuo/pen/poGeBWK?editors=1011)|
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/oNmZzPL) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/XWORWNa) |
| 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/xxMdZYoa) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/Exrmowr?editors=1010) |
| 阿賀#3700 | [CodePen](https://codepen.io/sungho/pen/WNPjMgm) |
| Joy-chiang | [CodePen](https://codepen.io/dcthmcje-the-reactor/pen/YzBVaNO?editors=1010) |
| jiayu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/ZEwKdOO?editors=1010) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/NWojZBq) |
| 小廷 | [CodePen](https://codepen.io/uyxkiake-the-selector/pen/rNPmEPG?editors=1011) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/PoVjYoj) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/VwgWmNM?editors=1010) |
|白夜|[CodePen](https://codepen.io/Wei903/pen/qBgjjyo?editors=1011)|
|davidtt|[CodePen](https://codepen.io/David-Tsai/pen/mdvwKyr?editors=1010)|
|_shun0130| [CodePen](https://codepen.io/koba60052ww/pen/dyaRrxg?editors=1011)|
| shcopy | [CodePen](https://codepen.io/shcopy/pen/yLZzKzd) |
|nikkita_3544|[Codepen](https://codepen.io/vanessa7259/pen/WNPMNWy?editors=0010)|
|Iris|[Codepen](https://codepen.io/iris831206/pen/poGarxz?editors=1011)|
|ChrisSQR|[CodePen](https://codepen.io/ChrisSQR/pen/PoVQeEe)|
| Daylily| [Codepen](https://codepen.io/daylily/pen/eYxVLEO)
|jimmy.0706|[CodePen](https://codepen.io/WeiJun-Mao/pen/yLZvZYY)|
|Lainie|[CodePen](https://codepen.io/Lainie88/pen/QWYmQeE?editors=1010)|
|Hank._.z|[CodePen](https://codepen.io/linoiaby-the-sans/pen/vYbjRbB)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/PoVaYja)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/ZEwjmJW)|
|bf_tsai|[Codepen](https://codepen.io/BF-Tsai/pen/oNmPgem?editors=0010)|
|sunny_08149|[Codepen](https://codepen.io/vjgpcfpk-the-builder/pen/PoVdbQJ)
|NathanJames|[Codepen](https://codepen.io/ufo060204/pen/BaMqBZR)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/zYemVar?editors=1010)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/MWLzPpE) |
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/RwvELjX)|
