JavaScript 在透過 textContent 與 innerText 取得內容方法上的差別

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。