textContent 與 innerText 都是 JavaScript 中用於操作節點文字內容的屬性，但它們之間存在幾個關鍵差異：

  1. 渲染後的文字 vs. 文件中的文字:

    • innerText 考慮了 CSS 樣式，它返回渲染後的文字內容，即按照樣式展示給使用者的內容，包括了 CSS 控制的顯示與隱藏。
    • textContent 返回節點及其後代的所有文字內容，包括 <script> 與 <style> 元素的文字，而不考慮 CSS 樣式或是否會被顯示。

  2. 效能:

    • textContent 通常效能更好，因為它不需要考慮 CSS 樣式或重新計算樣式，直接操作 DOM 中的文字。
    • innerText 在取得值時，需要計算樣式並「繪製」文字來確定哪些元素是可見的，這可能會導致效能不如 textContent。

  3. 跨瀏覽器相容性:

    • textContent 在現代瀏覽器中普遍支援，但在舊版本的 Internet Explorer（IE 8 及以下）中不可用。
    • innerText 在大多數瀏覽器中都支援，包括舊版本的 Internet Explorer。

  4. 換行符:

    • 在設定值時，textContent 保留了換行符，而 innerText 不保留。
選擇 textContent 還是 innerText 主要取決於開發上的具體需求：
  • 如果您需要獲取或設定包括隱藏元素在內的純文字內容，並且不關心文字的樣式或布局，則 textContent 是更好的選擇。
  • 如果您需要獲取或設定可見元素的格式化文字，並且關心文字的樣式和布局（比如，當複製文字到剪貼簿時保持格式），則 innerText 可能更適合。

在大多數情況下，推薦使用 textContent，因為它的效能更好，而且通常我們需要的是實際的文字內容，而不是基於樣式的渲染文字。只有當您確實需要考慮文字的樣式和可見性時，才考慮使用 innerText。