相容火狐瀏覽器的原生js設定元素的text文字值

antzone發表於2017-03-26
瀏覽器JS

設定元素的html內容可以使用innerHTML屬性，並且此屬效能夠相容所有瀏覽器，但是使用原生javascript設定元素的text文字值，則需要進行一些相容性處理，因為雖然有一個innerText屬性，但是隻有IE和谷歌瀏覽器支援，火狐並不支援，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
function getText(obj){ 
  if(obj.innerText){ 
    return obj.innerText; 
  } 
  var text=""; 
  obj=obj.childNodes||obj; 
  for(var index=0;index<obj.length;index++){ 
    if(obj[index].nodeType==3){ 
      text+=obj[index].nodeValue; 
    } 
    else{ 
      text+=getText(obj[index].childNodes);
    } 
  } 
  return text; 
}
window.onload=function(){
  var obt=document.getElementById("bt");
  var oantzone=document.getElementById("antzone");
  obt.onclick=function(){
    alert(getText(oantzone));
  }
}
</script>  
</head>  
<body>  
<p id="antzone">
  <strong>
    <font color="red">螞蟻部落</font>antzone
  </strong>
</p>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

上面你的程式碼實現了相容所有瀏覽器獲取元素下文字內容的功能，下面介紹一下它的實現過程。

一.實現原理:

1.在IE谷歌瀏覽器下，使用innerText屬性可以獲取，但是在火狐瀏覽器下不行，那麼我們可以使用nodeValue來實現此功能，也就是獲取文字節點的nodeValue屬性值即可，然後再將其連線起來就可以了，具體可以參閱程式碼註釋。

二.程式碼註釋:

1.function getText(obj){}，此函式可以獲取指定元素下的文字內容，引數是元素物件或者集合。

2.if(obj.innerText){return obj.innerText;}，如果支援innerText屬性，那麼就直接返回此元素的此屬性值。

3.var text=""，宣告一個變數用來儲存文字內容。

4.obj=obj.childNodes||obj，如果傳遞的是一個元素物件就獲取它的子節點，如果是元素集合則直接使用該集合。

5.for(var index=0;index<obj.length;index++)，遍歷節點集合的每一個節點。

6.if(obj[index].nodeType==3){text+=obj[index].nodeValue;}，如果是文字節點，那麼就將文字節點的值累加到text字串中。

7.else{text+=getText(obj[index].childNodes);}，如果不是，則遞迴呼叫getText()函式，再獲取此節點下面的文字內容，以此類推。

8.return text，最終返回這個文字內容。

三.相關閱讀:

1.innerText屬性可以參閱textContent與innerText用法簡單介紹一章節。

2.childNodes可以參閱js childNodes一章節。

3.nodeType屬性可以參閱js nodeType一章節。

相關文章