標題中兩個屬性的功能非常相似,都可以設置或者返回指定節點的文本內容。
兩者的區別也是非常巨大的,本文將通過代碼實例詳細做一下說明。
(1).當前innerText屬性已經被標準化。
(2).下面的介紹都是在標準瀏覽器下的測試結果。
一.是否對隱藏元素有效:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cqetom.live/" />
<title>innerText與textContent區別</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">51前端</div>
</body>
</html>
代碼分析如下:
(1).div元素是隱藏元素,visibility:hidden。
(2).innerText無法返回隱藏元素的文本內容,而textContent屬性可以返回。
(3).上述代碼是取值,當設置文本內容的時候,兩個屬性都是有效的。
特別說明:對于display:none的元素,兩個屬性都可以獲取對應文本內容。
二.是否對HTML標簽進行解析:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cqetom.live/" />
<title>innerText與textContent區別</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>51前端一</div><div>51前端二</div><br/><div>51前端三</div>
</div>
</body>
</html>
代碼分析如下:
(1).獲取值的時候,innerText會對HTML進行解析。
(2).div是塊級元素,所以單獨占據一行,br又會產生一個換行,所以多出一個換行。
(3).textContent屬性會直接剔除HTML標簽,所以都會在一行顯示。
三.對于空格的解析:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cqetom.live/" />
<title>innerText與textContent區別</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>51     前端一</div>
  <div>51前端二</div>
  <div>51前端三</div>
</div>
</body>
</html>
代碼分析如下:
(1).innerText會將多個空格合并成一個。
(2).textContent對于多個空格都會生效。
(3).上述都是取值,設置值的時候,多個空格會被合并成一個。
特別說明:從代碼的表現來看,對于純標簽之間的空格,innerText貌似不生效,每一行的div前面都有一個空格,textContent有縮進效果,而innerText并沒有縮進效果。
四. 對\n、\r與\t的處理:
為了節省篇幅,下面僅以\n作為演示,其他兩個感興趣的朋友自行做一下測試。
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cqetom.live/" />
<title>innerText與textContent區別</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>51前端一</span>
 
 
<span>51前端二</span>
</div>
</body>
</html>
代碼分析如下:
(1).innerText獲取值的時候,對于換行是無效的。
(2).textContent獲取值的時候,換行總是生效的。
但是在設置值的時候,卻不是這樣,代碼是如下:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cqetom.live/" />
<title>innerText與textContent區別</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>
當設置值的時候,innerText是生效的,并且不會合并。
textContent則對\n無效,僅會合并成一個空格處理。
特別說明:id屬性值可以直接用作對象。

代碼描述:innerText textContent,innerText與textContent區別



50 67



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 js對象 javascript對象
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子