标题中两个属性的功能非常相似,都可以设置或者返回指定节点的文本内容。
两者的区别也是非常巨大的,本文将通过代码实例详细做一下说明。
(1).当前innerText属性已经被标准化。
(2).下面的介绍都是在标准浏览器下的测试结果。
一.是否对隐藏元素有效:
   [ 其他 ] 运行代码    下载代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<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.51qianduan.com/" />
<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.51qianduan.com/" />
<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.51qianduan.com/" />
<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.51qianduan.com/" />
<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区别



91 122



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 js对象 javascript对象

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到