JavaScript textContent

admin發表於2018-12-12
JavaScript


textContent屬性可以返回或者設定指定節點的文字內容。

上述概念闡述不足以完全涵蓋屬性所有特點，後面通過程式碼例項詳細介紹。

此屬性與innerText比較類似，但是區別也是巨大的，參閱如下兩篇文章：

（1）.JavaScript innerText一章節。

（2）.innerText與textContent區別一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let text = element.textContent; // 返回文字內容
element.textContent = text; // 設定文字內容

瀏覽器支援:

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.textContent="螞蟻部落";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012532xixxog212zzg2v19.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過textContent屬性為div元素設定為本內容，沒有什麼異議。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.textContent="螞蟻部落";
  }
}
</script>
</head>
<body>
<div id="ant">
  <div>
    <span>青島市南區</span>
  </div>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

點選按鈕執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012554l9ojjp9jcsm7cwv4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，通過textContent屬性設定為本內容會清空元素的所有子節點，使用指定文字替代。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.textContent="<b>螞蟻部落</b>";
  }
}
</script>
</head>
<body>
<div id="ant">青島市南區</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

點選按鈕程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012619bzaoa6s76b6674ot.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.被設定的文字內容中含有HTML標籤<b>。

（2）.但是此標籤並未被解析，而是作為純文字寫入div中。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.ant{float:left;}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.textContent);
}
</script>
</head>
<body>
  <div id="ant">1<span>2</span><span>3</span></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012644kx5733xv3ddzxur3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

textContent不但返回當前元素的文字內容，而且也會返回它後代元素的文字內容。

返回值是一個累積追加效果，但並不是簡單從子元素中取出文字進行追加，再來看一段程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.ant{float:left;}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.textContent);
}
</script>
</head>
<body>
<div id="ant">
  <div>螞蟻部落一</div>
  <div>螞蟻部落二</div><br/>
  <div class="ant">螞蟻部落三</div>
  <div class="ant">螞蟻部落四</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012708hh6rops7pph7j1p5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的textContent屬性的返回值表現可能會讓一些朋友疑惑，分析如下：

（1）."螞蟻部落一"上面的空白行是由於前面的換行導致的。

（2）.div中的文字都單獨形成一行，都是由於換行的原因。

（3）.<br>換行並沒有起到作用。

（4）.雖然最後兩個div通過浮動，瀏覽器解析在一行顯示，但是標籤之間的換行仍然起作用。

通過上面的程式碼表現可以總結如如下結論：

（1）.textContent獲取文字是直接量HTML標籤剝離，所以<br>換行不會起作用。

（2）.\t、\r、\n與連續的空格效果會生效，雖然我們只演示了\n換行。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>  
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let attrNode=odiv.getAttributeNode("web");
  odiv.innerHTML=attrNode.textContent;
}
</script>
</head>
<body>
  <div id="ant" web="螞蟻部落"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012733nwmssieebsdndnb7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的這個例子是為了化解一個誤解，不要以為textContent屬性僅對元素節點有效。

對於屬性節點，註釋節點等都是有效的，比如可以返回<style>和<script>節點的文字內容。

也可以返回隱藏元素的文字內容，如果要返回document文件的文字內容，需要使用document.documentElement.textContent，而不是document.textContent。

相關文章