textContent获取所有元素的内容，包括<script>和<style>元素。相比之下，innerText只显示“人类可读”的元素。
textContent返回节点中的每个元素。相反，innerText知道样式并且不会返回“隐藏”元素的文本。- https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
所以看起来innerText应该忽略不可见的元素，但实际上它没有。为什么？我好像误会了什么。
示例 1
const style = document.querySelector('style');
style.textContent = 'p { color: red; }'; // works
style.innerText = 'p { color: red; }'; // works. But why?
console.log(style.textContent); // works
console.log(style.innerText); // works. But why?html { font-family: sans-serif; }<p>foo</p>示例 2
const invisibleDiv = document.querySelector('div');
console.log(invisibleDiv.innerText); // works. But why?<div style="display: none;">
invisible div
</div>差异仅适用于嵌套在元素内的元素，而不适用于元素的文本本身。
console.log("outer.textContent:", outer.textContent);
console.log("outer.innerText:", outer.innerText);
console.log("inner.textContent:", inner.textContent);
console.log("inner.innerText:", inner.innerText);<div id="outer">This is visible <span id="inner" style="display: none;">This is invisible</span></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句