textContent=innerText?
圖片來源：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插入文字";
結果如下：
以上這兩段程式碼會有三種結果：
- 結果一：help1呈現文字；help2呈現文字。
- 結果二：help1呈現文字；help2不呈現文字。
- 結果三：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應該可以正常看到最後一段文字。
目前主流瀏覽器對於“標準”的支援度越來越好，希望有一天大家不用在玩這種跨瀏覽器處理的遊戲了。
感謝作者，因為您的文章啟發了我解決了一個的註冊限制提醒！
回覆刪除因為註冊時，一直出現「請輸入地址」但明明打了地址，而地址的原始碼
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！