# 🏅 Day 22 - textContent

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

### textContent 觀念複習

1. 透過 textContent 可以取得 DOM 元素內的 「純文字內容」，HTML 會被忽略（請注意「純文字內容」有包含換行以及空格）
HTML:

    <div class="targetClass">
      <p>取得這個 p 標籤的純文字</p>
    </div>

JS:

    const targetClass = document.querySelector(".targetClass p");
    console.log(targetClass.textContent);

結果（以下為 CodePen console 的結果）:

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

HTML:

    <!--  以下的 p 標籤會被清空，替換成純文字 "<h3>修改後的內容</h3>" -->
    <div class="targetClass">
      <p>替換這個 p 標籤</p>
    </div>

JS:

    const targetClass = document.querySelector(".targetClass");
    targetClass.textContent = "<h3>修改後的內容</h3>";

結果：
(網頁渲染出的畫面)
(修改後的 HTML 結構)

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

HTML:

    <div class="targetClass"></div>

JS:

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

結果：
(網頁渲染出的畫面)

(修改後的 HTML 結構)

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

HTML

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

JS

let trafficSign = "綠燈";

## 回報流程

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


<!-- 解答：

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

-->

回報區
---
| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/zYgzozX) |
| 02 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/RwXMbxJ?editors=1011) |
|03|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/yLmKLNV?editors=1010)|
|04|david1819|[CodePen](https://codepen.io/David-Lin-the-vuer/pen/QWemWad)|
|05|ABow_Chen|[CodePen](https://codepen.io/fred39392001/pen/zYgWYpj)|
|06|tim|[CodePen](https://codepen.io/jskrtivy-the-animator/pen/BaXraPK?editors=1010)|
|07|雪粒| [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/oNKqgvK) |
| 08 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/XWvEJKO) |
| 09 | brucelee0629 | [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/OJKvPdQ?editors=1011) |
| 10 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/mdNxJVX) |
| 11 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/OJKvVXw?editors=1111) |
| 12 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/vYoRNGb?editors=1011) |
| 13 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/xxvWZRo) |
| 14 | Mike | [CodePen](https://codepen.io/mike2049/pen/zYgWqbw?editors=1010) |
|15|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/wvVmWMv) |
| 16 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/YzmaGrq?editors=1011) |
| 17 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/yLmKazx) |
| 18 | kun._c8_shake_it | [CodePen](https://codepen.io/barry91205/pen/poMLeva) |
| 19 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/XWvEMVQ?editors=1111) |
| 20 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/RwXMVWL?editors=1111) |
| 21 | yuling | [CodePen](https://codepen.io/yu-ling-peng/pen/ExqEwNK?editors=1011) |
| 22 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/RwXMLeB) |
| 23 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/QWemOjj) |
| 24 | JIA | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/poMLpeV?editors=1011) |
| 25 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/vYoRpWK) |
| 26 | Celine | [CodePen](https://codepen.io/szuning/pen/KKOoGbK) |
| 27 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/GRVxLJp) |
| 28 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/XWvEwgb?editors=1011) |
| 29 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/XWvqJMx) |
| 30 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/NWQMxVY?editors=1011) |
|31|Tatsu| [CodePen](https://codepen.io/chindesu0207/pen/dyxedPM) |
| 32 | Mos | [CodePen](https://codepen.io/mos25399/pen/vYojeLx?editors=1010) |
| 33 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/xxvjmLM) |
| 34 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/eYqrxzo) |
| 35 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/LYwmKjQ?editors=1010) |
|36|Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/oNKyNBp?editors=1010) |
|37|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/eYqKrrr)|
| 38 | Emma | [CodePen](https://codepen.io/Emma0919/pen/JjgBbPV) |
| 39 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/GRVdwdL?editors=1011) |
| 40 | jerry_66983 | [CodePen](https://codepen.io/Barry-C/pen/qBeyRxj) |
| 41 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/BaXPRgr?editors=1012) |
| 42 | Jainee | [CodePen](https://codepen.io/Jainee0110/pen/WNVKOxL) |
| 43 | Ed Huang | [CodePen](https://codepen.io/yide1986/pen/jOgpeMa) |
| 44 | charlottelee | [CodePen](https://codepen.io/char849/pen/qBeyedp) |
| 45 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/NWQLKBX?editors=1011) |
| 46 | kaka_945 | [CodePen](https://codepen.io/kay945/pen/eYqLYVN) |
| 47 | JRz | [CodePen](https://codepen.io/JRZHENG/pen/xxvaEWW?editors=1111) |
|48|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvVExbR)|
| 49 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/YzmJyqG?editors=1111)|
| 50 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/yLmRpJL?editors=1011)|
| 51 | iamcan | [CodePen](https://codepen.io/uhnxswdq-the-typescripter/pen/QWeZmpx)|
| 52 | Glen_69515 |[codePen](https://codepen.io/glenyaochih/pen/ZEgmQQE)
| 53 | alec1203 | [CodePen](https://codepen.io/soloayaya/pen/oNKQLOz?editors=1012) |
| 54 | Seris | [CodePen](https://codepen.io/Dale-Chien/pen/LYwXemj?editors=1011) |
| 55 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/gOVEpRd?editors=1111) |
|56|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/JjgVPGX?editors=0011) |
| 57 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/VwoNRRq?editors=1011) |
| 58 | Ana | [CodePen](https://codepen.io/Ana-Wu/pen/NPKKjjb?editors=1010) |
| 59 | hojing | [CodePen](https://codepen.io/hjxu/pen/ByBarXr) |
| 60 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/PwYdabQ?editors=1010) |

<!-- 可複製下方格式
| | | [CodePen]() |
-->