網頁

DOM修改文字節點 - innerText或textContent傻傻分不清楚

textContent=innerText?

DOM節點樹

圖片來源:www.w3schools.com

在一段JS程式碼之中,看到一個未看過的textContent屬性,查詢了一下依照MDN對textContent的說明:Gets or sets the text content of a node and its descendents.基本上它的使用方式和innerText屬性一樣。

innerText與textContent的差異?

如果你對DOM不熟悉,可以先參考這篇DOM簡介

就功能上而言,兩者是一模一樣,主要都是針對文字節點(Text Node)來進行get與set的動作。先看一下以下程式碼:

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset=utf-8 />
   <title>Text Node Test</title>
   </head>
   <body>
     <p id="help1"></p>
     <p id="help2"></p>
     <p id="help3"></p>
   </body>
   </html>
  

以上只是一個簡單包含三個空白<p>元素的HTML。然後,我們撰寫JavaScript來修改文字節點的內容:

   // 測試innerText
   var test1 = document.getElementById('help1'); 
   test1.innerText  = "這是innerText插入文字";

   // 測試textContent
   var test2 = document.getElementById('help2');
   test2.textContent = "這是textContent插入文字";
  

結果如下:

Text Node Test

以上這兩段程式碼會有三種結果:

  1. 結果一:help1呈現文字;help2呈現文字。
  2. 結果二:help1呈現文字;help2呈現文字。
  3. 結果三:help1呈現不字;help2呈現文字。

要看到這三種結果也不難,打開Chrome就是結果一;打開IE(8以下)就是結果二;打開Firefox就是結果三。

原因在innerText

原因在innerText屬性身上,因為innerText是IE 8之前IE專用屬性,innerText並不是國際規範的一部分,是只早期在IE擁有高市佔率時,大家都已經習慣使用它。

Chrome是採用兩者都支援的方式,但Firefox比較嚴謹,不是規範的內容就不支援。

目前規範正式定義的是textContent屬性。但使用textContent又會碰到IE 8(含)之前不支援textContent屬性的問題,IE要到9才有支援textContent屬性。

所以如果你的程式碼中需要對文字節點進行存取的話,而且要理IE 8/7/6等版本的話,還是寫點小程式,進行跨瀏覽器的處理。

innerText與textContent的跨瀏覽器處理

程式碼邏輯很簡單,先測試目前瀏覽器是否支援textContent,支援即使用textContent,不支援就使用innerText。

   function changeTextById(elementId,changeVal){
       var hasInnerText = 
       (document.getElementsByTagName("body")[0].innerText !== undefined) ? true : false;
   
       var elem = document.getElementById(elementId);
    
       if(!hasInnerText){
    elem.textContent = changeVal;
       }else{
    elem.innerText = changeVal;
       }
   }

   changeTextById("help3", "函數自行判斷支援innerText或textContent");
  

在下方測試中,不管是IE 8以下或是Firefox應該可以正常看到最後一段文字。

Text Node Test

目前主流瀏覽器對於“標準”的支援度越來越好,希望有一天大家不用在玩這種跨瀏覽器處理的遊戲了。

參考資料

  • https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
  • http://forums.asp.net/t/1707194.aspx
  • http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/ (下面的討論很不錯)
  • http://www.w3schools.com/jsref/prop_node_textcontent.asp

1 則留言:

  1. 感謝作者,因為您的文章啟發了我解決了一個的註冊限制提醒!
    因為註冊時,一直出現「請輸入地址」但明明打了地址,而地址的原始碼
    if ($get("ctl00_ContentPlaceHolder1_textfield10").innerText.length == 0)
    {
    alert("請輸入 住址!");
    return false;
    }
    else if ($get("ctl00_ContentPlaceHolder1_textfield10").innerText.length > 100)
    {
    alert("住址 不得超過100個字元!");
    return false;
    }

    照大大說的,IE、Chrome都無法使用,剛好電腦沒裝firefox,下載裝來,登入後馬上成功。配服firefox!

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。