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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple11229 Oui3
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui ? Oui ? Oui

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,