原文摘自
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
</meta>
</head>
<body>
<div class="test" id="test">
test
<div style="display:none">
<span>
test
</span>
</div>
<style>
hi
</style>
</div>
<script type="text/javascript">
var testDiv = document.getElementById('test');
console.log("我是textContent输出的"+testDiv.textContent);
console.log("我是innerText输出的"+testDiv.innerText);
</script>
</body>
</html>
输出的结果：
我是textContent输出的testtesthi
我是innerText输出的test
1.主要差异
- textContent 会获取style= “display:none” 中的文本，而innerText不会
- textContent 会获取style标签里面的文本，而innerText不会
实例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
</meta>
</head>
<body>
<div class="test" id="test">
test
<div style="display:none">
<span>
test
</span>
</div>
<p>
hi
</p>
</div>
<script type="text/javascript">
var testDiv = document.getElementById('test');
console.log("我是textContent输出的"+testDiv.textContent);
console.log("我是innerText输出的"+testDiv.innerText);
</script>
</body>
</html>
输出结果：
我是textContent输出的
test test hi 我是innerText输出的test
hi
差异：
1. textContent不会理会html格式，直接输出不换行的文本
2. innerText会根据标签里面的元素独立一行
3.兼容性：
innerText 对IE的兼容性较好
textContent虽然作为标准方法但是只支持IE8+以上的浏览器
最新的浏览器，两个都可以使用