---
# System prepended metadata

title: +_innerText && textContent && outerText && innerHTML && text && title_C
tags: [DOM]

---

[TOC]
## +_innerText && textContent

>Node.innerText 是一個代表節點及其後代之「已渲染」（rendered）文字內容的屬性。
>
>Node.textContent 屬性表示了節點或其後代的文字內容。

參考資料：[JavaScript學習筆記－－innerText 與 textContent](https://uu9924079.medium.com/javascript%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-innertext-%E8%88%87-textcontent-755b8b93f13b)

### 一般情況拿到的字無差別
兩者在一般情況下抓到的東西是一樣的。

```html!
<h1>hello</h1>
```
在瀏覽器下：
![image](https://hackmd.io/_uploads/rJ-Ia16JJg.png)

### 寫 style 看兩者差別
但現在我們在 h1 寫一個 `inline-style`。
```html!
<h1 style="text-transform: uppercase">hello</h1>
```

在瀏覽器下：
![image](https://hackmd.io/_uploads/B1_p6JTyyg.png)

- innerText 拿到渲染後的大寫文字。
- textContent 拿到未被渲染的文字。

再來一個例子：
```html!
<h1>驚嘆號<span style="display: none">!!!!!!!!!</span></h1>
```
這時候 `!!!!!!!!!` 不會被渲染上去。
看！
![image](https://hackmd.io/_uploads/rk-X0ypyJe.png)

- innerText 拿到渲染後 `<span>` 被 `display:none` 的文字。
- textContent 拿到有驚嘆號的文字。

## C_innerText vs outerText
兩者取值（getter）的時候會是一樣的，但設定（setter）的時候行為不同。

範例來自於[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText)

假設結構為：
```html
<div>
  <p>Original content</p>
</div>
```
取值時兩者一樣
![image](https://hackmd.io/_uploads/S1_UgI0Jke.png)
![image](https://hackmd.io/_uploads/SJnLlLCJkx.png)


若更改`<p>`的`innerText`，是更改`<p>`內的文字
```javascript
p.innerText = "Modified content"
```
![image](https://hackmd.io/_uploads/HkGvxL0kJl.png)

若更改`<p>`的`outerText`，會把整個`<p>`更改成設定的文字
```javascript
p.outerText = "Modified content"
```
![image](https://hackmd.io/_uploads/Bk8veICJJl.png)

## C_innerText vs innerHTML
用前一個例子繼續來玩看看

```html
<div>
  <p>Original content</p>
</div>
```
`innerHTML`會取得div裡面所有的html，`innerText`則只取得文字部份
![image](https://hackmd.io/_uploads/HJ-Pf8Cy1e.png)

## C_text
text這個屬性是來自於`HTMLAnchorElement`，也就是`<a>`，所以不是`<a>`就不一定有這個屬性（目前已知`HTMLOptionElement`也有）

提供的資訊跟`textContent`一樣

參考來源：[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/text)
```html
<body>
    <a>Tangerine</a>
</body>
```
![image](https://hackmd.io/_uploads/rJQX9ICkJg.png)


對`text`設定看看
```javascript
a.text = "<p>Root</p>"
```
![image](https://hackmd.io/_uploads/r1vQ5ICkJx.png)
就是純文字XD

## C_title
對element設定`title`屬性後，滑鼠懸浮在這個element上面就會冒出提示，而這個提示就是當初設定`title`的值
參考來源：[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title)
```html
<div>
  <p>Original content</p>
</div>
```

```javascript
p.title = "Hello!!!"
```
![image](https://hackmd.io/_uploads/BJgz6ICJJe.png)
