---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
|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)|