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