---
# System prepended metadata

title: "\U0001F3C5  DAY22 每日任務"
tags: [JS 直播班  - 2021 秋季班]

---

# 🏅  DAY22 每日任務
###### tags: `JS 直播班  - 2021 秋季班`

textContent 觀念複習
---
以下程式碼請同學親自貼入 CodePen 或 VSCode 觀察結果


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

```htmlembedded=
<div class="targetClass">
  <p>取得這個 p 標籤的純文字</p>
</div>
```
```js=
let targetClass = document.querySelector(".targetClass p");
console.log(targetClass.textContent);
```
結果 (以下為 CodePen console 的結果):
![](https://i.imgur.com/K2kQogT.png =300x)
<!-- edit: 更新範例圖片 -->
<!-- ![](https://i.imgur.com/VltAXej.png) -->


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

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

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


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

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

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

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


問題
---
請練習用 querySelector 取得以下元素，並用 textContent 替它新增一些文字內容。

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


回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔!

|      Slack      |                              CodePen                              |
|:---------------:|:-----------------------------------------------------------------:|
|   Karen Huang   |           https://codepen.io/Coding_Snorlax/pen/GRvdeGq           |
|     CloThEs     |         https://codepen.io/bogwdnxx-the-sans/pen/rNzvRKq          |
|   Iris Huang    |              https://codepen.io/ythuang/pen/OJjZqGm               |
|      張喆       |              https://codepen.io/wow767t/pen/wvqjZMp               |
|    Aaron Tu     |              https://codepen.io/aarontu/pen/gOxzyPR               |
|     Tim Lin     |              https://codepen.io/TimmyLin/pen/LYjmvZG              |
|      米米       |     https://codepen.io/Jameshsu0407/pen/MWvGRKZ?editors=1010      |
|       Sam       |              https://codepen.io/sam-hsu/pen/YzxLMGp               |
|      lumei      |               https://codepen.io/l_umei/pen/KKvRYXJ               |
|       YC        |                https://codepen.io/YCLu/pen/PoKegJQ                |
|    AndyHunag    |            https://codepen.io/HsuHuaHuang/pen/vYJjMeZ             |
|  Jun Ting Lin   |              https://codepen.io/jake1155/pen/gOxzyoo              |
|     Arista      |            https://codepen.io/arista-hsieh/pen/ExvLJpP            |
|     劉維倫      |              https://codepen.io/lun0223/pen/vYJjMQW               |
|      大衛       |              https://codepen.io/exnsrpjc/pen/ZEJoZNG              |
|     Bonnie      |     https://codepen.io/bonnieli1414/pen/VwzxNOr?editors=0011      |
|      洋蔥       |        https://codepen.io/oikdkmxq-the-looper/pen/bGrMJPz         |
|      YuriT      |              https://codepen.io/wenfisht/pen/porVBgx              |
|    BeanHuang    |       https://codepen.io/Beanhuang/pen/GRvdaJX?editors=1011       |
|      Gill       |       https://codepen.io/Gill-Chin/pen/zYdjQvo?editors=1011       |
|      Yunei      |               https://codepen.io/Yunei/pen/NWvMVxV                |
| Cheng Pei-hsuan |              https://codepen.io/PaCheng/pen/zYdGKpO               |
|   Bella Shya    |       https://codepen.io/BellaXie/pen/eYEraKW?editors=1010        |
|     許閔翔      | https://codepen.io/oupbzfxq-the-scripter/pen/ExvLzOo?editors=1111 |
|   Elaine Liu    |      https://codepen.io/elaine7598/pen/BadxerX?editors=1010       |
|       Lai       |        https://codepen.io/co_lai/pen/RwZyzWX?editors=1111         |
|     POPEYE      |             https://codepen.io/popeye_ux/pen/LYjmwbG              |
|      Genos      |              https://codepen.io/pb220416/pen/OJjZKpz              |
|    PeggyTsai    |     https://codepen.io/pei-chi-tsai/pen/Vwzxobm?editors=1010      |
|     傅劍軒      |      https://codepen.io/seonkuraito/pen/NWvMVYP?editors=0010      |
|     連小艾      |       https://codepen.io/bolaslien/pen/jOLxgjj?editors=1111       |
|      群嘉       |        https://codepen.io/efzdamnp-the-lessful/pen/MWvXgbK        |
|     鄭安志      |       https://codepen.io/lwmtsgek/pen/WNEyepe?editors=1111        |
|   Peter Chen    |        https://codepen.io/yuckugjy-the-sasster/pen/NWvzKdQ        |
|     蔡明達      |              https://codepen.io/bmzpfyxe/pen/NWgKQZB              |
|     Jie Du      |              https://codepen.io/qgqonost-the-flexboxer/pen/XWaYWyo?editors=1010             |
|    陳暐中    |        https://codepen.io/wei-z/pen/vYJrEgg          |
|有廖先生(Rain)|https://codepen.io/billpop741/pen/jOLKEme   |
|Yashien Lin| https://codepen.io/YashienLin/pen/yLoENzO?editors=1011 |
|Hsiang|https://codepen.io/pen/?editors=1010|
|雪莉|https://codepen.io/utshang216/pen/gOxKPXX|
|Trista|https://codepen.io/trista6140/pen/porKyJz|
|  肉魚  |  https://codepen.io/zoechen13/pen/wvqXzqm  |
|Jocelyn|https://codepen.io/enjoyful/pen/MWvXjrR?editors=1011|
|  Yunyi  |  https://codepen.io/yunyi12374/pen/ZEJbKVW  |
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/eYEKBKg?editors=1010 |
| 蔣秉彣 | https://codepen.io/the-pierre/pen/vYJrxNK?editors=1010 |
|Phil |https://codepen.io/ctkeftjp-the-animator/pen/JjyZWNd?editors=1111 |
| 三隻小貓 | https://codepen.io/bagelover/pen/vYJrxWx |
|tingyu|https://codepen.io/dgltu/pen/oNeyWXe?editors=1111|
|Steven Chan |https://codepen.io/Steven1220/pen/qBXKXRd |
| Jun Hua | https://codepen.io/ydsyvkph/pen/NWvzaNm |
|Booker|https://codepen.io/bookbasketball/pen/VwzdMqG|
| Kelvin Hsu | https://codepen.io/kelvin001/pen/XWaYPjQ?editors=1111 |
| ZY Hsu | https://codepen.io/zihyin/pen/xxLzyPr?editors=0010 |
| Louis | https://codepen.io/Louis164156/pen/jOLKJQL?editors=1111 |
|   ZOE WU   |           https://codepen.io/Zoechiueh/pen/PoKaLrG?editors=1010           |
|Mingyo|https://codepen.io/Nick-Yo/pen/porKBWx?editors=1010 |
| Yof |https://hackmd.io/q30H6Mq0ThuwZ2FL28Gr2w|
|AKI|https://codepen.io/akichen27/pen/mdMjdLd|
| kk |https://codepen.io/potatokaka/pen/GRvBggq|
|Calon|https://codepen.io/Calon0118/pen/wvqxMxy|
|Anna|https://codepen.io/kycrleao/pen/dyzjdWz?editors=1111|
|LTL|https://codepen.io/ltlin93/pen/oNeMqjy|
| Riley | https://codepen.io/jjpxbprd/pen/xxLJjzK |
|Gui|https://codepen.io/guitimliu/pen/JjyBvxd|
|danny123|https://codepen.io/binlandz123/pen/mdMjjpZ?editors=1010 |
|柯勝華|https://codepen.io/Chill-Nick/pen/JjyBeQw?editors=0010|
|tingyu|https://codepen.io/dgltu/pen/vYJaQPo|
|Sandy|https://codepen.io/Sandy_L/pen/vYJabQj?editors=1011|
|Jasper|https://codepen.io/li-jasper/pen/LYjBoJj|
| 艾瑞客|https://codepen.io/ericla/pen/wvqEWQK?editors=0010|
| Vicky Kao  | https://codepen.io/vicky03035/pen/ExvebOE                  |
| phi        | https://codepen.io/aiya861202/pen/eYEmVjR                  |
| zaii       | https://codepen.io/ivy2846357/pen/gOxBpKv?editors=0010     |
| 鉦勝       | https://codepen.io/atckmax823/pen/dyzgzOr?editors=1011     |
| kailun     | https://codepen.io/Kailun/pen/OJjBzxM                      |
| 陳sam      | https://codepen.io/euldpliv/pen/KKvGYNa                    |
| Joey       | https://codepen.io/Joey-Chen/pen/VwzEOKe                   |
| lingxuan   | https://codepen.io/penglingxuan/pen/GRvwZZj                |
| Alvin      | https://codepen.io/pen/?editors=1010                       |
| 小K        | https://codepen.io/kelen1995/pen/wvqRjaZ                   |
| Chia Chi   | https://codepen.io/ClaraChen/pen/rNzvEpr?editors=1011      |
| 乃萱       | https://codepen.io/nainaikuo/pen/mdMavpV                   |
| Irene Wang | https://codepen.io/irene-wang-the-looper/pen/MWvLJbZ       |
| 吐司       | https://codepen.io/malolulu/pen/porGMLJ                    |
| Ching      | https://codepen.io/Jaimedede/pen/vYJPPox                   |
| debby yeh  | https://codepen.io/bhliyoup/pen/bGrJear?editors=1111       |
| Ching      | https://codepen.io/Jaimedede/pen/vYJPPox                   |
| kevinhes   | https://codepen.io/kevinhes/pen/porBKgJ?editors=1011       |
| Juno Li    | https://codepen.io/Juno026/pen/BadeGzN?editors=1011        |
| 傑瑞       | https://codepen.io/auatwood909815/pen/oNerNWJ?editors=1010 |
| paul       | https://codepen.io/printfootya/pen/mdMZeRZ                 |
| Aya        | https://codepen.io/NoNameNote/pen/BadeYqX                  | 
|Jean Chiang|https://codepen.io/jeanchiang1221/pen/QWMXOwj|
|Zooey Cheng|https://codepen.io/noraneko0430/pen/RwZXVvy?editors=1011
|Hamaji| https://codepen.io/hamajibashi/pen/NWaKjyB |
|Jeff|https://codepen.io/jeff-cheng/pen/BawobRR?editors=1111|
|ShinyChen|https://codepen.io/shinychen/pen/yLzvVYQ |


