innerText与textContent区别

标题中两个属性的功能非常相似，都可以设置或者返回指定节点的文本内容。
两者的区别也是非常巨大的，本文将通过代码实例详细做一下说明。
（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区别

下载全部收藏

293 391

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：24

关注

TA的相关作品 >>更多

热搜关键词

innerText与textContent区别

javascript面向对象继承的简单实例

javascript获取触发事件对象源码实例

javascript对象简单介绍

js对象specified属性用法代码下载

javascript判断json格式对象代码实例

javascript生成map对象函数源码下载