Propriété textContent du DOM HTML
Exemple
Obtenir le contenu textuel d'un élément :
var x =
document.getElementById("myBtn").textContent;
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La propriété textContent définit ou renvoie le contenu textuel du nœud spécifié et de tous ses descendants .
Si vous définissez la propriété textContent, tous les nœuds enfants sont supprimés et remplacés par un seul nœud Text contenant la chaîne spécifiée.
Remarque : Cette propriété est similaire à la propriété innerText , mais il existe quelques différences :
- textContent renvoie le contenu textuel de tous les éléments, tandis que innerText renvoie le contenu de tous les éléments, à l' exception des éléments <script> et <style>.
- innerText ne renverra pas le texte des éléments masqués avec CSS (textContent le fera).
Conseil : Parfois, cette propriété peut être utilisée à la place de la propriété nodeValue , mais n'oubliez pas que cette propriété renvoie également le texte de tous les nœuds enfants.
Conseil : Pour définir ou renvoyer le contenu HTML d'un élément, utilisez la propriété innerHTML .
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Syntaxe
Renvoie le contenu textuel d'un nœud :
node.textContent
Définissez le contenu textuel d'un nœud :
node.textContent = text
Valeurs de propriété
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Détails techniques
Valeur de retour : | Une chaîne, représentant le texte du nœud et tous ses descendants. Renvoie null si l'élément est un document, un type de document ou une notation. |
---|---|
Version DOM | Objet de nœud principal de niveau 3 |
Plus d'exemples
Exemple
Changez le contenu textuel d'un élément <p> avec id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Exemple
Récupère tout le contenu textuel d'un élément <ul> avec id="myList":
var x = document.getElementById("myList").textContent;
La valeur de x sera :
Coffee Tea
Exemple
Cet exemple illustre certaines des différences entre innerText, innerHTML et textContent :
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Obtenez le contenu de l'élément <p> ci-dessus avec les propriétés spécifiées :
innerText renvoie : "Cet élément a un espacement supplémentaire et contient un élément span."
innerHTML renvoie : " Cet élément a un espacement supplémentaire et contient <span>un élément span</span>."
textContent renvoie : " Cet élément a un espacement supplémentaire et contient un élément span."
La propriété innerText renvoie uniquement le texte, sans espacement ni balises d'élément internes.
La propriété innerHTML renvoie le texte, y compris toutes les balises d'espacement et d'élément interne.
La propriété textContent renvoie le texte avec espacement, mais sans balises d'élément internes.