當(dāng)我們想要訪問DOM中的文本內(nèi)容時(shí)，肯定會(huì)第一時(shí)間想到HTMLElement.innerText?。事實(shí)上，JavaScript 提供了兩個(gè)可用于「訪問元素文本內(nèi)容的」屬性：Node.textContent和HTMLElement.innerText。在大多數(shù)情況下，這兩者似乎可以互換。但我們在互換使用它們，往往會(huì)忽略兩者之間存在重要區(qū)別。

相似之處

我認(rèn)為在深入研究差異之前確定這兩個(gè)屬性的相似之處很有幫助。這也將闡明它們在大多數(shù)情況下的使用方式。

假設(shè)有一個(gè) HTML 元素，其中包含一些文本：

<p id="greeting">hello<strong>前端南玖</strong></p>

這兩個(gè)屬性都將返回元素的文本內(nèi)容，包括任何子「元素」的文本內(nèi)容。它們還將忽略元素內(nèi)容中可能出現(xiàn)的「任何 HTML 標(biāo)記?！苟?，它們也可用于「設(shè)置元素的文本內(nèi)容」。

const greeting = document.getElementById('greeting');

greeting.innerText; // "hello前端南玖"
greeting.textContent; // "hello前端南玖"

greeting.innerText = '小花貓'; // <p id="greeting">小花貓</p>
greeting.textContent = '小細(xì)狗'; // <p id="greeting">小細(xì)狗</p>

差異

到目前為止，這兩個(gè)屬性似乎在做完全相同的事情。事實(shí)上，它們都提供了一些非常有用的便利功能。然而，當(dāng)元素的內(nèi)容稍微復(fù)雜一點(diǎn)時(shí)，它們開始表現(xiàn)出一些差異。

以下面的 HTML 元素為例：

<div id="container">
  <style>
    p { color: red; }
    strong { text-transform: uppercase; }
    small { display: none; }
  </style>
  <p>hello<br />我是 <strong>南玖</strong></p>
  <small>公眾號 <strong>前端南玖</strong></small>
</div>

<script>
  console.log('【innerText】', container.innerText)

  console.log('【textContent】', container.textContent)
</script>

讓我們看一下這兩個(gè)屬性各自的輸出，看看它們有何不同。

在這種情況下是完全不同的，對吧？HTMLElement.innerText應(yīng)該大致「匹配用戶」在瀏覽器中看到的內(nèi)容。另一種思考方式是它的輸出應(yīng)該與用戶選擇元素的內(nèi)容并將其復(fù)制到剪貼板時(shí)得到的結(jié)果非常相似。

根據(jù)這個(gè)定義，首先要注意的是「隱藏的元素被忽略了」。這適用于不呈現(xiàn)的元素，例如<style>和<script>?，也適用于使用 CSS 隱藏的元素。在此示例中，該<small>?元素是隱藏的，因此它不包含在 的輸出中HTMLElement.innerText。

其次， 的輸出HTMLElement.innerText?被「歸一化」。這意味著所有空格都折疊成一個(gè)空格，并且所有換行符都替換為單個(gè)換行符。如果存在，<br>標(biāo)簽也會(huì)受到尊重，因此它們會(huì)被換行符替換。

我想說的最后一點(diǎn)是將「文本轉(zhuǎn)換」HTMLElement.innerText?應(yīng)用于元素的內(nèi)容。在本例中，元素被轉(zhuǎn)換為大寫，因此 的輸出反映了這一點(diǎn)。<strong>? HTMLElement.innerText

另一方面，Node.textContent?返回元素的「確切文本內(nèi)容，包括任何空格和換行符?！谷欢?lt;br>?標(biāo)簽在沒有任何替代品的情況下被剝離。它還包括任何隱藏元素的文本內(nèi)容，例如<style>和<script>并且沒有應(yīng)用任何文本轉(zhuǎn)換。

表現(xiàn)

可是等等！還有更多！雖然HTMLElement.innerText看起來是明智的選擇，但它帶有性能問題。為了弄清楚瀏覽器呈現(xiàn)的內(nèi)容，必須考慮 CSS，觸發(fā)重排。這在計(jì)算上可能「很昂貴」，并且可能會(huì)造成無意的性能瓶頸。

在我看來，一個(gè)好的經(jīng)驗(yàn)法則是Node.textContent?盡可能使用純文本元素。對于更復(fù)雜的元素，請嘗試確定它們?nèi)绾问懿季趾陀脩艚换サ挠绊憽＠?，只呈現(xiàn)一次且永遠(yuǎn)不會(huì)改變的復(fù)雜元素將是 的用例HTMLElement.innerText，但您可以將輸出存儲(chǔ)在變量中并重新使用它。

結(jié)論

HTMLElement.innerText并且Node.textContent是兩個(gè)非常相似的屬性，可用于訪問和操作元素的文本內(nèi)容。但是，它們在一些重要方面有所不同，你應(yīng)該了解這些差異以選擇最適合您需求的一種。始終檢查你的用例并考慮你的選擇對性能的影響。

• textContent會(huì)獲取所有元素的content，包括<script>和<style>元素或者可以說innerText的值依賴于瀏覽器的顯示，textContent依賴于代碼的顯示
• innerText返回值會(huì)被格式化，而textContent不會(huì)。textContent會(huì)把空標(biāo)簽解析成換行（幾個(gè)空標(biāo)簽就是幾行），innerText只會(huì)把block元素類型的空標(biāo)簽解析換行，并且如果是多個(gè)的話仍看成是一個(gè)，而inline類型的原素則解析成空格
• innerText 會(huì)帶來性能影響（innerText會(huì)觸發(fā)reflow，而textContent不會(huì)）