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

Syntaxe

var text = element.textContent;
element.textContent = "ceci est un simple exemple de texte";

Description

  • textContent renvoie null si l'élément est un document, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser document.documentElement.textContent .
  • Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, textContent renvoie le texte à l'intérieur du nœud (la valeur nodeValue).
  • Pour les autres types de nœuds, textContent renvoie la concaténation des valeurs de propriété textContent de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.
  • En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.

Différences avec innerText

Internet Explorer a introduit une propriété node.innerText. L'intention est similaire mais comporte les différences suivantes :

  • textContent récupère le contenu de tous les éléments, y compris <script> et <style>, ce qui n'est pas le cas de innerText.
  • innerText prend en compte le style de l'élément et ne retournera rien pour les éléments cachés. Aussi, il déclenchera un reflow à l'inverse de textContent.
  • Comme innerText reconnaît le style CSS, il déclenchera une refusion (reflow), alors que textContent ne le fera pas.
  • Contrairement à textContent, la modification innerText dans Internet Explorer (jusqu'à la version 11 incluse), non seulement supprime les nœuds enfants de l'élément, mais détruit aussi définitivement tout nœud de texte descendant (il est donc impossible d'insérer à nouveau des nœuds dans un autre élément ou dans le même élément) .

Différences avec innerHTML

Element.innerHTML renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent innerHTML. Cependant, textContent a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de textContent peut empêcher les attaques XSS.

Exemple

// Étant donné le fragment de HTML suivant :
//   <div id="divA">Ceci est un <span>exemple de</span> texte</div>

// On obtient le contenu textuel :
var text = document.getElementById("divA").textContent;
// |text| vaut "Ceci est un exemple de texte".

// On définit le contenu textuel :
document.getElementById("divA").textContent = "Ceci est un exemple de texte";
// Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div>

Polyfill pour IE8

// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
if (Object.defineProperty 
  && Object.getOwnPropertyDescriptor 
  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") 
  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     // Passing innerText or innerText.get directly does not work,
     // wrapper function is required.
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'Node.textContent' dans cette spécification.
Standard évolutif Pas de changement de DOM4
DOM4
La définition de 'Node.textContent' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 3 Core Specification
La définition de 'Node.textContent' dans cette spécification.
Obsolete Définition initiale.

Voir aussi

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16, fscholz, teoli, Etienne_WATTEBLED, khalid32, Delapouite, BenoitL
Dernière mise à jour par : loella16,