Propriété textContent de l'élément DOM HTML

Définition et utilisation

textContent Cette propriété définit ou retourne le contenu texte d'un noeud spécifique, ainsi que de tous ses descendants.

Si vous avez défini textContent Cette propriété supprime tous les descendants et est remplacée par un seul noeud texte contenant la chaîne donnée.

Avis :Parfois, cette propriété peut être utilisée pour remplacer la propriété nodeValue, mais souvenez-vous que cette propriété retourne également le texte de tous les descendants.

Voir également :

Attribut innerText

Attribut innerHTML

Exemple

Exemple 1

Retourner le contenu texte de l'élément:

let text = element.textContent;

Essayez-le vous-même

Exemple 2

Modifier le contenu texte de l'élément <p> avec l'id="demo":

element.textContent = "I have changed!";

Essayez-le vous-même

Exemple 3

Obtenir tout le contenu texte de l'élément <ul> avec l'id="myList":

let text = document.getElementById("myList").textContent;

Essayez-le vous-même

Syntaxe

Retourner le contenu texte du nœud :

element.textContent

ou

node.textContent

Définir le contenu texte du nœud :

element.textContent = text
node.textContent = text

Valeur de l'attribut

Valeur Description
text Le contenu texte d'un élément ou d'un nœud.

Valeur de retour

Type Description
Chaîne

Le contenu texte de l'élément et de tous ses descendants.

Si l'élément est document, document type ou notation, retourne null.

Différences entre innerHTML, innerText et textContent

L'attribut innerText retourne :

Retourne uniquement le contenu texte de l'élément et de tous ses descendants, sans espaces cachés CSS et balises, sauf pour les éléments <script> et <style>.

L'attribut innerHTML retourne :

Le contenu texte de l'élément, y compris tous les espaces et les balises HTML internes.

L'attribut textContent retourne :

Le contenu texte de l'élément et de tous ses descendants, avec des espaces et du texte caché CSS, mais sans balises.

Exemple HTML

<p id="myP">   Cet élément a de l'espace supplémentaire     et contient <span>un élément span</span>.</p>

Exemples JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Essayez-le vous-même

Dans l'exemple précédent :

L'attribut innerText retourne :

Cet élément a de l'espace supplémentaire et contient un élément span.

L'attribut innerHTML retourne :

   Cet élément a de l'espace supplémentaire et contient <span>un élément span</span>.

L'attribut textContent retourne :

   Cet élément a de l'espace supplémentaire et contient un élément span.

Support du navigateur

element.textContent C'est une caractéristique de DOM Level 3 (2004).

Tous les navigateurs le supportent pleinement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support