textContent和innerText属性的区别
一、总结
一句话总结：
^、textContent 属性设置或者返回指定节点的文本内容。如果你设置了 textContent 属性, 任何的子节点会被移除及被指定的字符串的文本节点替换。
^、innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
<!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
二、textContent和innerText属性的区别
转自或参考：textContent和innerText属性的区别
https://blog.csdn.net/dexing07/article/details/77947333
实例：
<!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 会获取style= “display:none” 中的文本，而innerText不会
- textContent 会获取style标签里面的文本，而innerText
差异：
1. textContent不会理会html格式，直接输出不换行的文本
2. innerText会根据标签里面的元素独立一行
3.兼容性：
innerText 对IE的兼容性较好
textContent虽然作为标准方法但是只支持IE8+以上的浏览器