iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

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

Day 14 JavaScript innerText vs textContent

  • 分享至 

  • xImage
  •  

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

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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言