Node.
Lit ou définit tout le texte d’un élément, sans les balises HTML.
- Renvoie
- Une chaîne avec le texte de l’élément et de tous ses descendants.
Exemple
#const welcome = document.querySelector('#welcome')
console.log(welcome.textContent)
console.log(welcome.children.length)
welcome.textContent = 'Toutes les tâches sont terminées !'
console.log(welcome.children.length)Définition et utilisation
#La propriété textContent renvoie le texte de l’élément avec celui de tous les éléments imbriqués, réunis en une seule chaîne. Les balises HTML sont ignorées et il ne reste que le contenu, espaces et retours à la ligne du code HTML compris.
Affecter une valeur à textContent supprime tout le contenu de l’élément et le remplace par un seul nœud de texte. Le texte est inséré littéralement : les caractères < et > ne créent pas de balises, ils apparaissent simplement à l’écran. C’est donc une façon sûre d’afficher des données venant de l’utilisateur.
La propriété voisine innerText tient compte des styles : elle ignore les éléments cachés et reproduit la mise en lignes visible à l’écran. Elle est cependant plus lente, car elle nécessite de calculer la mise en page. Pour un simple affichage de texte, préférez textContent.
Syntaxe
#const text = element.textContent
element.textContent = newTextPlus d’exemples
#const comment = document.querySelector('#comment')
comment.textContent = 'Utilisez la balise <strong> pour mettre le texte en gras'
console.log(comment.children.length)
console.log(comment.innerHTML)const skills = document.querySelector('#skills')
console.log(JSON.stringify(skills.textContent))
console.log(skills.textContent.trim().split(/\s+/))Les indentations et les retours à la ligne du code HTML sont eux aussi du texte, donc ils se retrouvent dans textContent. JSON.stringify() les affiche sous forme de \n et d’espaces, et trim() les supprime au début et à la fin.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour afficher du texte venant de l’utilisateur, utilisez
textContent, pasinnerHTML. Cela protège contre l’injection de code (une attaque XSS). - Le texte lu peut contenir des espaces et des retours à la ligne venant du code HTML. Nettoyez-le avec
trim()si besoin. - Affecter
element.textContent = ""est un moyen rapide de vider un élément.
Entrées associées
#- innerHTML vs textContentinnerHTML lit et définit le code HTML d’un élément en l’analysant pour créer de nouveaux éléments, tandis que textContent lit et définit du texte brut, sans balises.
- Element.innerHTMLLit ou remplace le contenu d’un élément sous forme de code HTML.
- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- String.prototype.trim()Supprime les espaces blancs aux deux extrémités de la chaîne : espaces, tabulations et retours à la ligne.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.