Node 對象提供了 textContent 屬性實現獲取或設置 HTML 頁面中指定元素的文本內容。 ## 獲取文本內容 textContent 屬性表示 HTML 頁面指定節點及其后代節點的文本內容。其語法格式如下: ```javascript var text = element.textContent; ``` 在上述語法結構中，返回值 text 表示 element 節點及其后代節點的文本內容。 需要說明的是，在上述語法結構中，調用 textContent 屬性的 element 表示元素節點。元素節點本身也是一個元素。 > **值得注意的是:** 如果指定節點是 Document 文檔節點的話，textContent 返回 null。 我們可以通過如下代碼示例，測試如何通過 textContent 屬性獲取指定節點的文本內容: ```javascript var pElement = document.getElementById('p'); console.log(pElement.textContent); ``` > **值得注意的是:** 如果指定節點的后代節點也包含文本內容的話，那該節點調用 textContent 屬性時，則會返回該節點及其所有后代節點的文本內容。 > > 如下 HTML 頁面結構: > > ```html > <p id="content">這是一個<span>段落</span>內容。</p> > ``` > > 如果我們通過上述 `<p>` 元素調用 textContent 屬性的話，得到的結果并不是如下結果: > > ``` > 這是一個內容。 > ``` > > 而是如下結果: > > ``` > 這是一個段落內容。 > ``` ## 設置文本內容 通過 textContent 屬性不僅可以獲取 HTML 頁面中指定節點及其后代節點的文本內容，還可以設置指定節點的文本內容。其語法結構如下: ```javascript element.textContent = "this is some sample text"; ``` > **值得注意的是:** 在節點上設置?textContent?屬性的話，會刪除它的所有子節點，并替換為一個具有給定值的文本節點。 我們可以通過如下代碼示例，測試如何通過 textContent 屬性設置指定節點的文本內容: ```javascript var btn = document.getElementById('btn'); btn.textContent = 'A New Button'; ``` ## innerText 屬性 IE 引入了?node.innerText 屬性，意圖類似 textContent。但有以下區別： - textContent?會獲取所有元素的內容，包括?`<script>`?和?`<style>`?元素，然而?innerText?不會。 - innerText 意識到樣式，并且不會返回隱藏元素的文本，而 textContent 會。 - 由于?innerText?受?CSS 樣式的影響，它會觸發重排（reflow），但 textContent?不會。 - 在 IE (小于等于?IE11 的版本) 中對?innerText 進行修改，不僅會移除當前元素的子節點，而且還會永久性地破壞所有后代文本節點。 關于 innerText 屬性的具體用法請參考 [MSDN社區的相關說明](https://msdn.microsoft.com/en-us/library/ms533899(v=vs.85).aspx)。 ## 瀏覽器兼容問題解決方案 在實際開發中，我們需要盡量滿足所有瀏覽器對文本內容操作的需求。所以，我們可以使用如下代碼解決瀏覽器之間的兼容問題: ```javascript function text(elem, text){ if(text){ elem.textContent ? elem.textContent = text : elem.innerText = text; }else{ if(elem.textContent){ // 表示其他瀏覽器 return elem.textContent; }else{ // 表示 IE 瀏覽器 return elem.innerText; } } } ```