Node : propriété textContent

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

La propriété textContent de l'interface Node représente le contenu textuel du nœud et de ses descendants.

Note : textContent et HTMLElement.innerText sont facilement confondus, mais les deux propriétés sont différentes de manière importante.

Valeur

Une chaîne de caractères, ou null. Sa valeur dépend de la situation :

Si le nœud est un document ou un doctype, textContent retourne null.

Note : Pour obtenir tout le texte et les données CDATA pour l'ensemble du document, utilisez document.documentElement.textContent.
Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, textContent retourne, ou définit, le texte à l'intérieur du nœud, c'est-à-dire le Node.nodeValue.
Pour les autres types de nœuds, textContent retourne la concaténation du textContent de chaque nœud enfant, à l'exclusion des commentaires et des instructions de traitement. (C'est une chaîne de caractères vide si le nœud n'a pas d'enfants.)

Attention : La définition de textContent sur un nœud supprime tous les enfants du nœud et les remplace par un seul nœud texte avec la valeur de chaîne de caractères donnée.

Différences avec `innerText`

Ne vous laissez pas tromper par les différences entre Node.textContent et HTMLElement.innerText. Bien que les noms semblent similaires, il existe des différences importantes :

textContent récupère le contenu de tous les éléments, y compris <script> et <style>. En revanche, innerText ne montre que les éléments « lisibles par une personne ».
textContent retourne chaque élément dans le nœud. En revanche, innerText prend en compte le style et ne retourne pas le texte des éléments « cachés ».
- De plus, comme innerText prend en compte les styles CSS, la lecture de la valeur de innerText déclenche un re-calcul de mise en page pour garantir des styles calculés à jour. (Les re-calculs de mise en page peuvent être coûteux en termes de calcul, et doivent donc être évités autant que possible.)

Element.innerHTML retourne ou définit le HTML, comme son nom l'indique. Nous déconseillons d'utiliser innerHTML pour obtenir ou définir du texte à l'intérieur d'un élément, car il traite du HTML brut plutôt que du texte brut et peut être vulnérable aux attaques XSS. Même si vous êtes sûr que le texte ne contient jamais de syntaxe HTML, il reste moins sémantique et plus lent, car il doit invoquer l'analyseur HTML.

Exemples

Commençons avec ce fragment HTML.

html

<div id="divA">Ceci est un <span>exemple de</span> texte</div>

Vous pouvez utiliser textContent pour obtenir le contenu textuel de l'élément :

let texte = document.getElementById("divA").textContent;
// La variable texte vaut maintenant : 'Ceci est un exemple de texte'

Si vous préférez définir le contenu textuel de l'élément, vous pouvez faire :

document.getElementById("divA").textContent = "Ceci est un texte différent !";
// Le HTML pour divA est à présent :
// <div id="divA">Ceci est un texte différent !</div>