JavaScript innerText

admin發表於2018-09-30
JavaScript

首先對它是否是W3C標準屬性做一下說明：

（1）.此屬性首先被IE瀏覽器支援（IE並非總是攔路虎）。

（2）.2016年，此屬性才被標準化，所以很多老舊文章稱其非W3C標準支援並非妄言。

innerText屬性可以獲取或者設定指定元素的文字內容。

可以結合innerHTML屬性與textContent屬性一起學習，能夠加深理解。

相關閱讀：

（1）.innerHTML屬性可以參閱JavaScript innerHTML一章節。

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

語法結構一：

[JavaScript] 純文字檢視 複製程式碼
textContent=domObj.innerText

獲取指定元素內的文字內容。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
domObj.innerText=textContent

為指定元素設定HTML內容。

瀏覽器相容：

（1）.IE瀏覽器支援此屬性。

（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 type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerText="螞蟻部落";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/210743bj6rhaijqa6jatdb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼非常簡單，將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 obt=document.getElementById("bt");
  let odiv=document.getElementById("box");
  obt.onclick=function(){
    odiv.innerText="softwhy.com";
  }
}
</script> 
</head> 
<body> 
  <div id="box">
    <div>
      <p>螞蟻部落</p>
    </div>
  </div>
  <input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/20/234501kkddpug7yd9buyg1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選按鈕之後，可以設定box元素的文字內容，原來的內容會被新設定的文字所替換。

可以看到box元素中的所有內容，包括後代元素全部會清空，然後重置為指定文字。

[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(){
  let odiv = document.getElementById("ant");
  odiv.innerText="<b>螞蟻部落</b>";
}
</script>
</head>
<body>
<div id="ant">青島市南區</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/210815w7jjh446japb16bh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

大家知道<b>是HTML中的標準標籤，可以將文字設定為粗體。

但是innerText屬性會將HTML標籤解析為普通文字，而不是將其作為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(){
  let odiv = document.getElementById("ant");
  alert(odiv.innerText);
}
</script>
</head>
<body>
<div id="ant">螞蟻部落</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/210850lgcboc7baji7oa7h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼可以彈出div元素中的文字內容，應該沒有任何異議。

再來看一段程式碼例項：

[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(){
  let odiv = document.getElementById("ant");
  alert(odiv.innerText);
}
</script>
</head>
<body>
<div id="ant"><b>螞蟻部落</b></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/211455xb0u0ffu37nbza0w.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

彈出的內容和前一段程式碼完全一樣，儘管"螞蟻部落"使用<b>標籤包裹。

這是因為<b>標籤會被瀏覽器解析渲染，它不會被看做文字，而是對文字的修飾。

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

點選按鈕程式碼控制列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/20/235350xfk229nu44uwzuwn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

innerText可以獲取指定元素極其後代元素的文字內容。

可以看到獲取的文字內容具有一定的格式，因為HTML標籤會被解析，比如div和p都是塊級元素，那麼內容都會單獨佔據一行，而p又可以增加一個換行，所以文字之間又多了一行空白。

相關文章