Javascript 将“显示”设置为“无”后，Div innerText将丢失新行

在编写基于HTML的自定义WYSIWYG编辑器时，我遇到了这种奇怪的行为

在div中输入一些包含新行的文本，该div将

contentEditable

设置为

true

此时

div.innerText

正好包含输入的文本，包括新行

然后设置

div.style.display=none

并重新检查

div.innerText

：它是相同的文本，但新行被删除

为什么呢？这个案子有“标准行为”吗

（在FF开发者版本89.0b3（64位）和Chrome版本90.0.4430.85（官方版本）（64位）中测试）

=>后续行动 还有一个类似的奇怪问题：

var d=document.getElementById（“divTest”）
函数设置（）{
d、 innerText=“1\n2”
}
函数日志（）{
console.log（d.innerText）
日志儿童（）
}
函数logChildren（）{
log（“子节点：”）；
d、 forEach（节点=>{
log（node.toString（））；
});
}

div[内容可编辑]{
边框：1px纯红；
}

innerText的实现取决于元素是否可见。正如@Nisala在评论中指出的，如果将
div
的
display
属性设置回
block
，则
内部文本将再次包含换行符


const input=document.querySelector（“输入”）；
函数性能实验（）{
log（`innerText-before-style-change:${input.innerText}`）；
input.style.display=“无”；
log（`innerText在第一次样式更改之后：${input.innerText}`）；
input.style.display=“block”；
log（`innerText在第二次样式更改之后：${input.innerText}`）；
}
#输入{
边框：1px纯黑；
}
在下面的框中输入多行文本，然后单击按钮

实验
好吧，这太疯狂了。有趣的是，如果随后将显示样式设置回
block
，换行符将再次显示！感觉像是某种奇怪的实现错误。超级-非常感谢-提供了详细的解释/示例和到文档的链接！我现在明白了，但不明白为什么它们在没有新行的情况下连接节点（在display:none的情况下）？仅当新行首先存在时，子节点才会产生这样的结果-如果文本中没有新行，则列表中只有一个子节点（在上一个代码段中尝试过），并且它们实际上从列表中重新创建换行符，但仅在display:block的情况下。那么为什么显示块与无之间存在差异呢？我认为问题在于没有换行符，只有
div
的新
block
级别的子级，内部文本节点包含新行的内容。当元素可见时，
innerText
在树的文本节点之间注入新行，其效果类似于
块
级子节点的效果。当元素不可见时，
innerText
只需获取树中的所有文本节点并将它们连接起来。我可能错了，是的，我也有同样的理解。我简直无法想象人们为什么要这样做。如果有“注入新行”的功能，为什么不在所有情况下使用它，而不管CSS表示，而不是检查显示属性，然后更改逻辑，即有或没有新行？