javascript textContent屬性用法

antzone發表於2017-03-26
JavaScript

本章節介紹一下textContent屬性的作用是什麼，它的使用頻率並不是很高，因為存在著一定的相容性問題，但是並非沒有它的用武之地，因為它的作用和innerText非常相像，而innerText也存在一定相容性問題，兩個屬性配合使用能夠較好的實現獲取元素下文字的效果，所以對textContent掌握還是非常有必要的，下面進入正題。

一.textContent基礎知識:

此屬性可以返回或者設定指定元素的文字內容。

當返回文字內容的時候，能夠返回指定元素下所有的文字內容，包括後代元素的文字內容。

當設定元素的文字內容的時候，首先會清空元素的內容，然後再設定它的文字內容。

二.瀏覽器相容問題:

1.IE8以上瀏覽器支援此屬性。

2.谷歌瀏覽器支援此屬性。

3.火狐瀏覽器支援此屬性。

三.程式碼例項:

例項一:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){
    alert(odiv.textContent);
  }
}
</script> 
</head> 
<body>
<div id="thediv">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面你的程式碼可以獲取指定元素下的文字內容。

例項二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){
    alert(odiv.textContent);
  }
}
</script> 
</head> 
<body>
<div id="thediv">螞蟻部落<span>歡迎您</span></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面你的程式碼可以獲取指定元素下所有的文字內容。

例項三:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){
    odiv.textContent="分享互助";
  }
}
</script> 
</head> 
<body>
<div id="thediv">螞蟻部落<span>歡迎您</span></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

以上程式碼可以設定元素的文字內容。

相關文章