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+以上的瀏覽器