textContent vs innerText : lequel utiliser ?

innerText et textContent sont deux propriétés couramment utilisées en JavaScript pour accéder au contenu textuel des éléments. . Bien que les deux propriétés partagent des fonctionnalités similaires, il existe des différences clés qui déterminent le cas d'utilisation approprié pour chacune.

innerText

innerText renvoie le texte visible contenu dans un élément HTML. Il exclut tous les éléments masqués ou les éléments dont le style d'affichage est défini sur « aucun ».

Exemple :

Hello 

innerText renverrait « Bonjour » pour cet élément.

textContent

textContent, sur le d'autre part, renvoie le contenu du texte intégral, quels que soient la visibilité ou les styles d'affichage. Dans l'exemple ci-dessus, textContent renverrait « Hello World ».

Différences clés :

• Conformité standard : innerText n'était pas un -propriété standard, alors que textContent est une propriété standardisée.
• Performance : innerText nécessite des informations de mise en page pour déterminer la visibilité. text, ce qui le rend plus gourmand en performances que textContent.
• Scope : innerText n'est disponible que pour les objets HTMLElement, tandis que textContent peut être utilisé avec tous les objets Node.

Considérations d'utilisation :

Pour les cas où vous souhaitez accéder uniquement au texte visible, innerText peut être un choix plus efficace. Cependant, si vous devez récupérer l'intégralité du contenu du texte, par exemple le contenu écrit, textContent est la propriété préférée.

Dans l'exemple fourni :

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

Vous pouvez utiliser textContent pour mettre à jour le contenu textuel de l'élément de logo. Il remplacera tout texte existant par "Exemple".