为什么innerText会在不可见元素上呈现空格？

Question

我有这段代码：

for (let x = 0; x < VALUE_INPUTS.length; x++) {
    const PROPERTY = {};
    let sibling = VALUE_INPUTS[x].parentElement.previousElementSibling;
    PROPERTY.unit = sibling.innerText;
    sibling = sibling.previousElementSibling;
    PROPERTY.name = sibling.innerText;
    console.log(PROPERTY);
    console.log(x);
}

现在，当我查看控制台时，我可以看到以下内容被记录：

{unit: "↵                                            ↵    …        ↵                                        ", name: "1"}
0
{unit: "↵                                            ↵    …        ↵                                        ", name: "as"}
1

等。

它遍历整个循环，吐出各处的空白。我期望这种行为来自innerHtml，而不是来自innerText。然后它变得更奇怪，因为我注意到最后一个对象看起来像这样（很好！）：

{unit: "3", name: "3"}

当我调查它时，我发现只有当VALUE_INPUTS[x]的父元素具有display: none;时才会发生这种情况。我碰巧打开了最后一个元素，其他元素都被隐藏了。导致最后一个对象被正确记录。

现在我知道我可以用trim()轻松解决这个问题，但我想知道为什么会这样？ This问题看起来有些类似，但并不能解释为什么会发生这种问题并且略有不同。