element.textContent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Syntaxe

js
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

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

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

// On définit le contenu textuel&nbsp;:
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

js
// 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

BCD tables only load in the browser

Spécifications

Specification
DOM Standard
# dom-node-textcontent

Voir aussi