为什么textContent不会触发重排

Question

我正在研究MDN上textContent和innerText之间的区别。它向我展示了让我很困惑的东西。

1.innerText知道样式，不会返回隐藏元素的文本，而textContent会。 （没问题，完全明白）

2.由于innerText知道CSS样式，它会触发重排，而textContent则不会。 （为什么？）

Answer 1

我被建议回答这个问题，而不是留下评论。虽然之后我做了很多研究。现在让我们再看看差异。

  

innerText知道样式，不会返回隐藏文本   元素

引自MDN。

这意味着，innerText只从可见元素中获取文本（不是display: none，也不是visibility: hidden）。此外，还将考虑应用于text-transform: uppercase等元素的css样式。因此，innerText将返回大写的文本版本，而textContent将返回未更改的版本。你可以在jsfiddle上尝试这个demo。

由于innerText需要知道元素的最新样式，它应首先触发reflow（刷新排队的reflow列表）并重新计算元素的样式。然后得到预期的结果。

而textContent不会这样做，因为它不知道样式。

如果您对innerText和textContent之间差异的更多细节感兴趣，可以阅读此article。