Ce guide illustrera comment accéder et manipuler la propriété « textContent » de l'élément HTML DOM en JavaScript.
Tout d’abord, jetez un œil aux bases de la propriété HTML DOM « textContent ».
Qu'est-ce que la propriété HTML DOM « textContent » en JavaScript ?
Le ' texteContenu ' est la propriété intégrée qui définit, récupère et modifie le texte d'un élément ou d'un nœud spécifié, y compris tous ses descendants. Les descendants sont des éléments enfants tels que , , et bien d'autres qui sont utilisés à des fins de formatage. Lors de la définition du texte à l'aide de la propriété « textContent », les descendants de l'élément ciblé sont complètement remplacés par le nouveau texte.
Syntaxe (Définir le contenu du texte)
La syntaxe de base pour définir le texte d'un élément/nœud en utilisant le ' texteContenu « propriété est écrit ci-dessous :
élément. texteContenu = texte | nœud. texteContenu = texte
La syntaxe ci-dessus prend le « » souhaité texte ' comme valeur que l'utilisateur souhaite définir pour un élément ou un nœud.
Syntaxe (Obtenir le contenu du texte)
La syntaxe généralisée pour renvoyer le texte d'un élément ou d'un nœud via le ' texteContenu ' La propriété est indiquée ici :
élément. texteContenu | nœud. texteContenuValeur de retour : Le ' texteContenu 'La propriété renvoie le' texte ' d'un élément ou d'un nœud avec un espacement mais sans ses balises HTML internes.
Utilisez maintenant pratiquement les syntaxes définies ci-dessus pour accéder et manipuler la propriété « textContent ».
Comment accéder et manipuler la propriété « textContent » de l'élément HTML DOM en JavaScript ?
Semblable aux propriétés « innerHTML » et « innerText », le « texteContenu 'La propriété permet également aux utilisateurs de définir, d'accéder et de modifier facilement le texte de l'élément souhaité. Cette section effectue toutes ces opérations sur un élément à l'aide des exemples ci-dessous.
Exemple 1 : application de la propriété « textContent » pour accéder au texte de l'élément/du nœud
Cet exemple applique la propriété « textContent » pour renvoyer le texte d'un élément ou d'un nœud particulier, y compris tous ses enfants.
Code HTML
< div identifiant = 'maDiv' au survol de la souris = 'getText()' style = 'bordure : 3px noir uni ; largeur : 400px ; remplissage : 5px 5px ; marge : auto ;' >< h1 > Premier titre < / h1 >
< h2 > Deuxième titre < / h2 >
< h3 > Troisième titre < / h3 >
< h4 > Quatrième titre < / h4 >
< h5 > Cinquième titre < / h5 >
< h6 > Sixième titre < / h6 >
< / div >
Dans les lignes de code HTML ci-dessus :
- Le ' ' La balise ayant un identifiant « myDiv » crée un élément div qui est stylisé avec les propriétés suivantes : bordure, largeur, remplissage (haut et bas, gauche et droite) et marge. Il joint également le « au survol de la souris ' événement qui invoque le ' obtenirTexte() 'fonctionne lorsque l'utilisateur passe la souris dessus.
- À l'intérieur du div, toutes les balises de titre spécifiées (h1, h2, h3, h4, h5 et h6) insèrent les éléments de titre en fonction de leurs niveaux spécifiés.
Code JavaScript
< scénario >
fonction getText ( ) {
était élément = document. getElementById ( 'maDiv' ) ;
alerte ( élément. texteContenu ) ;
}
scénario >Dans le bloc de code JavaScript écrit ci-dessus :
- Définir une fonction nommée « obtenirTexte() ».
- A l'intérieur de cette fonction, la variable « elem » applique le « getElementById() ' pour accéder à l'élément div via son identifiant.
- Le ' alerte() ' La méthode crée une boîte d'alerte qui utilise le ' texteContenu ” pour renvoyer le texte du div parent ainsi que toutes ses personnes à charge.
Sortir
La sortie ci-dessous affiche une boîte d'alerte affichant le contenu textuel de l'élément div :
Exemple 2 : application de la propriété « textContent » pour remplacer le contenu textuel d'un élément, y compris ses descendants
Cet exemple montre comment la propriété « textContent » remplace tous les enfants d'un élément tout en modifiant son texte.
Code HTML
< centre >
< identifiant h1 = 'ma tête' sur clic = 'modifierTexte()' >< b > Ce b > est < portée > Titre < portée > < je > Élément je > h1 >
centre >Dans les lignes de code indiquées ci-dessus :
- Le ' La balise ' ajoute un élément de titre de niveau 1 avec un ' attaché ' sur clic ' événement qui invoque le ' modifierTexte() 'fonctionne lorsque l'utilisateur clique dessus.
- L'élément de titre contient également le ' ', '
', et ' »tags comme ses descendants. La balise « » est utilisée pour mettre en gras la chaîne ci-jointe, la balise « » sans aucune propriété de style est utilisée pour n'appliquer aucun style sur la chaîne donnée, et la balise « » est utilisée pour afficher le chaîne spécifiée en italique.
Code JavaScript
< scénario >
où h1 = document. getElementById ( 'ma tête' ) ;
console. enregistrer ( h1 ) ;
fonction modifierTexte ( ) {
h1. texteContenu = 'Bienvenue sur Linuxhint !' ;
console. enregistrer ( h1 )
}
scénario >Dans le code JavaScript ci-dessus :
- La variable « h1 » utilise le « document.getElementById() ' pour accéder à l'élément de titre via son identifiant attribué.
- Le ' console.log() ' La méthode affiche l'élément d'en-tête consulté sur la console avant de modifier son contenu.
- La fonction nommée « modifierTexte() 'utilise le' texteContenu ” pour modifier le texte de l’élément d’en-tête récupéré.
- La dernière méthode « console.log() » affiche à nouveau la valeur « h1 » après modification.
Sortir
La console montre clairement que tous les enfants de l'élément de titre donné ont été remplacés par le texte nouvellement spécifié en cliquant dessus :
Exemple 3 : application de la propriété « textContent » pour modifier le texte de l'enfant de l'élément
Cet exemple utilise la propriété « textContent » pour modifier le texte de l'enfant de l'élément spécifique.
Code HTML
< div identifiant = 'maDiv' style = 'bordure : 3px noir uni ; largeur : 400px ; remplissage : 5px 5px ; marge : auto ;' >
< centre >
< bouton identifiant = 'btn' au survol de la souris = 'changeTexte()' > Ancien bouton < / bouton >
< / centre >
< / div >Dans ce scénario:
- L'élément « div » possède un élément « bouton » qui est créé à l'aide de l'élément «
' étiqueter. - L'élément bouton contient en outre un identifiant attribué et un ' au survol de la souris ' événement qui appelle le ' changerTexte() 'fonctionne lorsque la souris passe dessus.
Code JavaScript
< scénario >
était parentElement = document. getElementById ( 'maDiv' ) ;
cible variable = document. getElementById ( 'btn' ) ;
c'était me trouver = parentElement. contient ( cible ) ;
si ( parentElement. contient ( cible ) == vrai ) {
console. enregistrer ( trouve-moi ) ;
fonction changeTexte ( ) {
cible. texteContenu = 'Nouveau bouton' ;
}
} autre {
console. enregistrer ( 'N'existe pas' )
}
scénario >Dans l'extrait de code ci-dessus :
- La variable « parentElement » applique le « getElementById() ' pour accéder à l'élément div parent. La variable « target » utilise également la méthode « getElementById() » pour récupérer l'élément de bouton ajouté en utilisant son identifiant.
- La variable « find_me » utilise le « contient() ' pour vérifier si l'élément de bouton ciblé est l'enfant du div ou non. Cette méthode renverra « vrai » pour « oui » sinon « faux ».
- Le ' sinon ' L'instruction définit un bloc de code.
- Si l'élément ciblé est l'enfant de l'élément parent, alors le ' changerTexte() La fonction ' changera son texte via le ' texteContenu ' propriété. Sinon, le bloc de code « else » s’exécutera pour afficher le message spécifié en utilisant le « console.log() ' méthode.
Sortir
La console affiche un « vrai ' valeur booléenne qui vérifie que l'élément bouton est l'enfant du div donné, puis son texte change lorsque vous passez la souris dessus :
Différence entre les propriétés textContent, innerText et innerHTML ?
Généralement, le « texteContenu ', ' texte intérieur ', et ' intérieurHTML 'Les propriétés traitent du texte d'un élément ou d'un nœud de la manière de le définir et de l'obtenir. Cependant, ces propriétés diffèrent les unes des autres en fonction de certains facteurs. Cette section met en évidence les principales différences entre chacun d’eux :
Termes 'Contenu du texte' 'texte intérieur' « HTML interne » Type de retour Il renvoie le texte d'un élément y compris tous ses enfants (balises de formatage), le texte masqué CSS et l'espace. Il ne renvoie pas les balises HTML d'un élément. Il renvoie le contenu textuel de l'élément HTML ciblé avec tous ses enfants (balises de formatage). Il ne renvoie pas d'espace, de texte masqué CSS et de balises HTML à l'exception de