La propriété JavaScript textContent permet de définir et d'obtenir le contenu textuel de la page. Il est utilisé pour transmettre et afficher le contenu textuel de certaines informations, balises et données de grande taille et leurs nœuds. Le TextContent varie de la nodeValue de la balise de script et renvoie le contenu des nœuds enfants des multiples types de données.
Si le nœud est un nœud de texte, une instruction de traitement ou une remarque de balise, alors javascript textContent obtient ou définit le texte. Le TextContent montre la concaténation du textContent de chaque nœud enfant. Il affiche les instructions de traitement et les commentaires sur les autres types de nœuds.
Syntaxe
Deux syntaxes sont disponibles pour le contenu du texte JavaScript. La première syntaxe sert à définir le texte d'un nœud et la seconde syntaxe permet de récupérer le texte du nœud.
Syntaxe 1 :
La syntaxe suivante permet de définir le texte du nœud à l'aide du contenu textuel.
cartographie en dactylographié
Node_element.textContent = information;
Syntaxe 2 :
La syntaxe suivante utilise le contenu textuel pour obtenir le texte du nœud.
Node_element.textContent;
Valeur de retour :
- Une chaîne contient le texte du nœud de sortie et de son nœud enfant. La sortie affiche une valeur nulle si un élément est un document ou un type de document.
- Les nœuds enfants sont remplacés par un seul nœud Text utilisant l'ensemble de l'attribut textContent. L'attribut a une chaîne spécifique comme contenu.
Exemples
Les exemples suivants montrent l'ensemble et obtiennent les différents types d'informations à l'aide de l'attribut textContent.
Exemple 1
L'exemple suivant utilise le contenu textuel du javascript pour définir les informations. Les données du nœud affichent le texte des balises.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } Sortir
L'image suivante montre l'ensemble des données à l'aide du nœud de contenu.
caractère dans la chaîne
Exemple 2
L'exemple suivant utilise le contenu textuel du javascript pour obtenir les informations. Nous pouvons obtenir la valeur du bouton de la fonction clic.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } Sortir
L'image suivante montre l'ensemble des données à l'aide du nœud de contenu.
Exemple 3
L'exemple suivant utilise le contenu textuel du javascript pour obtenir les informations. Nous pouvons obtenir la valeur du bouton de la fonction clic.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById('value').textContent; document.getElementById('textContent_information').textContent = text_in; } Sortir
L'image suivante montre l'ensemble des données à l'aide du nœud de contenu.
Exemple4
L'exemple suivant utilise le contenu textuel sur la valeur du bouton pour obtenir et définir les informations. Nous pouvons obtenir la valeur après avoir cliqué sur le bouton.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } Sortir
L'image suivante montre l'ensemble des données à l'aide du nœud de contenu.
Exemple5
L'exemple suivant utilise pour obtenir et définir les informations à l'aide de innerHtml, innerText et du contenu textuel sur la valeur du bouton. Nous pouvons obtenir la différence dans les données de sortie après avoir cliqué sur le bouton.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!'; } Sortir
L'image suivante montre l'ensemble des données à l'aide du nœud de contenu.
Exemple 6
formule de maçon
L'exemple suivant utilise pour obtenir les données de la liste et définir les informations à l'aide du contenu textuel sur la valeur du bouton onclick. Nous pouvons obtenir les données de la liste et d’autres informations sur les balises.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; document.getElementById('tinfo').textContent = students; } Sortir
L'image suivante montre l'ensemble des données à l'aide du nœud de contenu.
Exemple 7
Le contenu texte ne prend pas en charge les données vides si les informations ou la chaîne sont vides. Il affiche la chaîne vide sous forme de valeur.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } Sortir
L'image suivante montre le nœud d'obtention des données à l'aide de contenu texte.
Point clé du contenu du texte en javascript
- Lorsque les informations javascript suppriment automatiquement le code HTML, l'utilisation de textContent est sécurisée.
- Le contenu du texte et les informations incluent les espaces et les balises d'éléments internes. L'attribut innerHTML le renverra.
- L'attribut innerText renvoie uniquement du texte sans espaces ni balises d'éléments internes. La propriété textContent renvoie du texte qui inclut des espaces mais exclut les balises d'éléments internes.
- Les valeurs de tous les nœuds de texte du sous-arbre sont combinées et définies pour le contenu du texte et extraites du contenu du texte. Si un nœud n'a aucun enfant, la chaîne est vide.
- Le innerText renvoie un texte lisible par l'homme et prend en compte n'importe quel CSS. Le contenu du texte est difficile à lire lorsque des balises HTML sont utilisées dans les données.
- Lorsqu'une propriété est définie sur un nœud, tous ses enfants sont supprimés et un seul nœud de texte prend sa place avec la valeur spécifiée.
Conclusion
Le contenu du texte affiche plusieurs types d'informations. La balise HTML nécessitait des informations et des données de liste affichées à l'aide d'une seule méthode.