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

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

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

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

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

結果 (以下為 CodePen console 的結果):
<!-- edit: 更新範例圖片 -->
<!--  -->

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

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

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

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

結果 2:
(修改後的 HTML 結構)

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

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

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

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

結果 2:
(修改後的 HTML 結構)

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

<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 |