Day 14 JavaScript innerText vs textContent - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 14

0

Modern Web

網頁前後端寶石庫-礦坑補完計畫系列第 14 篇

Day 14 JavaScript innerText vs textContent

13th鐵人賽網頁前端網頁前後端寶石庫

2021-09-29 21:28:57

965 瀏覽

分享至

兩個都可以替換標籤內的文字內容。

Node.innerText:

只會顯示我們能在瀏覽器上看到的標籤，像是 p 或是 a 標籤之類的。
會拿的到 CSS，如果有用到 display:none 之類的屬性會變得看不見。
因為會讀取到 CSS 的關係，會佔用到更多頻寬，效能上會比較差，

Node.textContent:

除了顯示我們能在瀏覽器上看到的標籤之外，也會拿到像是 script 和 style 之類在瀏覽器上看不見的標籤。
會回傳節點內全部的標籤。
只會讀取到標籤，效能較好。

結論：

用 textContent 會比較好，相容性較好、效能較佳、不會因為 CSS 的關係而看不見。

參考：
[1]innerText、innerHTML、textContent、outerHTML 的差別
[2]DOM修改文字節點 - INNERTEXT或TEXTCONTENT傻傻分不清楚

Day 13 JavaScript 的資料型態

Day 15 JavaScript NodeList vs HTMLCollection

系列文

網頁前後端寶石庫-礦坑補完計畫共 30 篇

目錄

RSS系列文訂閱系列文

4 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙