innerText與textContent區別

admin發表於2018-12-12

標題中兩個屬性的功能非常相似，都可以設定或者返回指定節點的文字內容。

兩者的區別也是非常巨大的，本文將通過程式碼例項詳細做一下說明。

兩個屬性基本用法參閱如下兩篇文章：

（1）.innerText屬性參閱JavaScript innerText一章節。

（2）.textContent屬性參閱JavaScript textContent一章節。

特別說明：

（1）.當前innerText屬性已經被標準化。

（2）.下面的介紹都是在標準瀏覽器下的測試結果。

一.是否對隱藏元素有效：

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

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

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

程式碼分析如下：

（1）.div元素是隱藏元素，visibility:hidden。

（2）.innerText無法返回隱藏元素的文字內容，而textContent屬性可以返回。

（3）.上述程式碼是取值，當設定文字內容的時候，兩個屬性都是有效的。

特別說明：對於display:none的元素，兩個屬性都可以獲取對應文字內容。

二.是否對HTML標籤進行解析：

[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");
  console.log(odiv.innerText);
  console.log(odiv.textContent);
}
</script>
</head>
<body>
<div id="ant">
<div>螞蟻部落一</div><div>螞蟻部落二</div><br/><div>螞蟻部落三</div>
</div>
</body>
</html>

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

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

程式碼分析如下：

（1）.獲取值的時候，innerText會對HTML進行解析。

（2）.div是塊級元素，所以單獨佔據一行，br又會產生一個換行，所以多出一個換行。

（3）.textContent屬性會直接剔除HTML標籤，所以都會在一行顯示。

三.對於空格的解析：

[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");
  console.log(odiv.innerText);
  console.log(odiv.textContent);
}
</script>
</head>
<body>
<div id="ant">
      <div>螞蟻   部落一</div>
  <div>螞蟻部落二</div>
  <div>螞蟻部落三</div>
</div>
</body>
</html>

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

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

程式碼分析如下：

（1）.innerText會將多個空格合併成一個。

（2）.textContent對於多個空格都會生效。

（3）.上述都是取值，設定值的時候，多個空格會被合併成一個。

特別說明：從程式碼的表現來看，對於純標籤之間的空格，innerText貌似不生效，每一行的div前面都有一個空格，textContent有縮排效果，而innerText並沒有縮排效果。

四.對\n、\r與\t的處理：

為了節省篇幅，下面僅以\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 obt=document.getElementById("bt");
  console.log(odiv.innerText);
  console.log(odiv.textContent);
}
</script>
</head>
<body>
<div id="ant">
<span>螞蟻部落一</span>


<span>螞蟻部落二</span>
</div>
</body>
</html>

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

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

程式碼分析如下：

（1）.innerText獲取值的時候，對於換行是無效的。

（2）.textContent獲取值的時候，換行總是生效的。

但是在設定值的時候，卻不是這樣，程式碼是如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:180px;
  height:60px;
  background-color:#ccc;
  margin:5px;
}
</style>
<script>
window.onload=function(){
  one.innerText="ab\nc";
  two.textContent="ab\n\n\nc";
}
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>

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

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

當設定值的時候，innerText是生效的，並且不會合並。

textContent則對\n無效，僅會合併成一個空格處理。

特別說明：id屬性值可以直接用作物件。

相關文章