为何innerText可读取不可见元素内容？与MDN描述不符的原因是什么

你遇到的现象是对innerText的特性适用场景存在两个常见认知偏差导致的：

1. 「忽略隐藏元素文本」的适用范围 #

MDN提到的「innerText可感知样式，不会返回隐藏元素的文本」，仅适用于在父元素上调用innerText时，过滤其内部处于隐藏状态的子元素内容的场景，不包含直接对隐藏元素本身调用innerText的情况。

你示例2中直接对display: none的div本身调用innerText，自然会返回它的内部文本。只有在它的父级元素上调用innerText时，这个隐藏div的内容才会被过滤，比如：

<div id="parent">
  可见文本
  <div style="display: none" id="hidden">隐藏文本</div>
</div>

console.log(document.getElementById('parent').innerText) // 仅输出「可见文本」，隐藏内容被过滤
console.log(document.getElementById('hidden').innerText) // 输出「隐藏文本」

2. 元标签的特殊兼容处理 #

MDN描述的「innerText仅展示人类可读的元素内容」是针对普通可渲染内容元素的规则，<style>、<script>属于元数据元素，本身默认不会渲染到页面上。浏览器为了兼容早期IE的旧编码习惯，对这类元素的innerText做了特殊实现，行为和textContent基本一致，读写都会直接操作元素内部的文本内容，所以你示例1中对style元素调用innerText也会正常生效和输出。

内容的提问来源于stack exchange，提问作者user90726