pourquoi textContent ne déclencherait pas une refusion

Question

Je regardais la différence entre textContent et innerText sur MDN. Et cela me montre quelque chose qui m'a beaucoup dérouté. 1.innerText est conscient du style et ne retournera pas le texte des éléments cachés, alors que textContent le fera. (pas de problème, totalement comprendre)

2.Comme innerText est conscient du style CSS, il déclenchera une refusion, contrairement à textContent. (pourquoi?)

Answer 1

On m'a suggéré de répondre à cette question au lieu de laisser des commentaires. Bien que j'ai fait beaucoup plus de recherches après ça. Maintenant, regardons les différences à nouveau.

innerText est conscient du style et ne retournera pas le texte des éléments cachés

de MDN Référencés. Cela signifie que innerText n'obtient du texte que des éléments visibles (pas display: none, visibility: hidden). De plus, les styles CSS appliqués sur des éléments tels que text-transform: uppercase seront également pris en compte. Par conséquent, innerText renvoie la version majuscule du texte tandis que textContent renvoie la version inchangée. Vous pouvez essayer de cette demo sur jsfiddle. Etant donné que innerText a besoin de savoir quel est le style le plus récent de l'élément, il doit d'abord déclencher la refusion (vider la liste de refusion en file d'attente) et recalculer le style de l'élément.

Considérant que textContent n'a pas à le faire car il ne connaît pas le style.

Si vous êtes intéressé par plus de détails sur les différences entre innerText et textContent, vous pouvez avoir une lecture de ce article.