---
# System prepended metadata

title: "\U0001F3C5 3/16 (二) 每日任務"
tags: [JS 直播班 - 2021 春季班]

---

# 🏅 3/16 (二) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

textContent 觀念複習
---
以下程式碼請同學親自貼入 CodePen 或 VSCode 觀察結果
[參考章節](https://courses.hexschool.com/courses/1289881/lectures/30768816)

### 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/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 中回報就算完成了喔!