标题中两个属性的功能非常相似，都可以设置或者返回指定节点的文本内容。
两者的区别也是非常巨大的，本文将通过代码实例详细做一下说明。
（1）.当前innerText属性已经被标准化。
（2）.下面的介绍都是在标准浏览器下的测试结果。
一.是否对隐藏元素有效：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.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">乐分享</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.cxvn.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>乐分享一</div><div>乐分享二</div><br/><div>乐分享三</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.cxvn.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>乐分享二</div>
<div>乐分享三</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.cxvn.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>乐分享一</span><span>乐分享二</span>
</div>
</body>
</html>
代码分析如下：
（1）.innerText获取值的时候，对于换行是无效的。
（2）.textContent获取值的时候，换行总是生效的。
但是在设置值的时候，却不是这样，代码是如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.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属性值可以直接用作对象。
1.《innerText与textContent区别》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《innerText与textContent区别》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/251.html