Aquesta guia il·lustrarà com accedir i manipular la propietat 'textContent' de l'element DOM HTML a JavaScript.
Primer, feu una ullada als conceptes bàsics de la propietat 'textContent' del DOM HTML.
Quina és la propietat HTML DOM 'textContent' a JavaScript?
El ' textContent ” és la propietat integrada que estableix, recupera i modifica el text d'un element o node especificat incloent tots els seus descendents. Els descendents són elements fills com ara , , i molts més que s'utilitzen amb finalitats de format. Mentre s'estableix el text amb la propietat 'textContent', els descendents de l'element objectiu se substitueixen completament pel nou text.
Sintaxi (establir contingut de text)
La sintaxi bàsica per configurar el text d'un element/node utilitzant el ' textContent ” la propietat s'escriu a continuació:
element. textContent = text | node. textContent = text
La sintaxi anterior pren el desitjat ' text ” com un valor que l'usuari vol establir per a un element o node.
Sintaxi (Obtenir contingut de text)
La sintaxi generalitzada per retornar el text d'un element o node mitjançant el ' textContent 'La propietat s'indica aquí:
element. textContent | node. textContentValor de retorn: El ' textContent ' la propietat retorna el ' text ” d'un element o node amb espai però sense les seves etiquetes HTML interiors.
Ara utilitzeu pràcticament les sintaxis definides anteriorment per accedir i manipular la propietat 'textContent'.
Com accedir i manipular la propietat 'textContent' de l'element HTML DOM a JavaScript?
Similar a les propietats 'innerHTML' i 'innerText', el ' textContent ” La propietat també permet als usuaris establir, accedir i modificar el text de l'element desitjat fàcilment. Aquesta secció realitza totes aquestes operacions en un element utilitzant els exemples que s'indiquen a continuació.
Exemple 1: aplicació de la propietat 'textContent' per accedir al text de l'element/node
Aquest exemple aplica la propietat 'textContent' per retornar el text d'un element o node concret, inclosos tots els seus fills.
Codi HTML
< div id = 'el meuDiv' sobre el ratolí = 'getText()' estil = 'borde: 3px negre sòlid; amplada: 400px; farciment: 5px 5px; marge: automàtic;' >< h1 > Primer títol < / h1 >
< h2 > Segon títol < / h2 >
< h3 > Tercer títol < / h3 >
< h4 > Quart títol < / h4 >
< h5 > Cinquè títol < / h5 >
< h6 > Sisè títol < / h6 >
< / div >
A les línies anteriors del codi HTML:
- El ' ” amb l'identificador “myDiv” crea un element div amb un estil amb les següents propietats vora, amplada, farciment (superior i inferior, esquerre i dret) i marge. També adjunta el ' sobre el ratolí ” esdeveniment que invoca el “ getText() ” quan l'usuari passa el ratolí per sobre.
- Dins del div, totes les etiquetes d'encapçalament especificades (h1,h2,h3,h4,h5 i h6) insereixen els elements d'encapçalament segons els seus nivells especificats.
Codi JavaScript
< guió >
funció getText ( ) {
era elem = document. getElementById ( 'el meuDiv' ) ;
alerta ( element. textContent ) ;
}
guió >Al bloc de codi JavaScript escrit anteriorment:
- Definiu una funció anomenada ' getText() ”.
- Dins d'aquesta funció, la variable 'elem' aplica el ' getElementById() ” mètode per accedir a l'element div mitjançant el seu id.
- El ' alerta () El mètode crea un quadre d'alerta que utilitza el ' textContent ” propietat per retornar el text del div principal juntament amb tots els seus dependents.
Sortida
La sortida següent mostra un quadre d'alerta que mostra el contingut de text de l'element div:
Exemple 2: aplicació de la propietat 'textContent' per substituir un contingut de text d'element incloent els seus descendents
Aquest exemple mostra com la propietat 'textContent' substitueix tots els fills d'un element mentre modifica el seu text.
Codi HTML
< centre >
< h1 id = 'el meu cap' fent clic = 'modificarText()' >< b > Això b > és < span > Encapçalament < span > < i > Element i > h1 >
centre >A les línies de codi anteriors:
- El ' L'etiqueta afegeix un element d'encapçalament del nivell 1 amb un adjunt ' fent clic ” esdeveniment que invoca el “ modificarText() ” quan l'usuari hi fa clic.
- L'element d'encapçalament també conté el ' ”, “ ”, i “ ” etiqueta com els seus descendents. L'etiqueta ' ' s'utilitza per posar en negreta la cadena adjunta, l'etiqueta '' sense cap propietat d'estil s'utilitza per aplicar cap estil a la cadena donada i l'etiqueta ' ' s'utilitza per mostrar el cadena especificada com a cursiva.
Codi JavaScript
< guió >
on h1 = document. getElementById ( 'el meu cap' ) ;
consola. registre ( h1 ) ;
funció modifyText ( ) {
h1. textContent = 'Benvingut a Linuxhint!' ;
consola. registre ( h1 )
}
guió >Al codi JavaScript anterior:
- La variable 'h1' utilitza el ' document.getElementById() ” mètode per accedir a l'element d'encapçalament mitjançant el seu identificador assignat.
- El ' console.log() ” El mètode mostra l'element d'encapçalament accedit a la consola abans de canviar-ne el contingut.
- La funció anomenada ' modificarText() ' utilitza el ' textContent ” propietat per modificar el text de l'element d'encapçalament obtingut.
- L'últim mètode 'console.log()' torna a mostrar el valor 'h1' després de la modificació.
Sortida
La consola mostra clarament que tots els fills de l'element d'encapçalament donat s'han substituït pel nou text especificat en fer-hi clic:
Exemple 3: aplicació de la propietat 'textContent' per modificar el text del fill de l'element
Aquest exemple utilitza la propietat 'textContent' per modificar el text del fill de l'element específic.
Codi HTML
< div id = 'el meuDiv' estil = 'borde: 3px negre sòlid; amplada: 400px; farciment: 5px 5px; marge: automàtic;' >
< centre >
< botó id = 'btn' sobre el ratolí = 'canviar el text()' > Botó Vell < / botó >
< / centre >
< / div >En aquest escenari:
- L'element 'div' té un element 'botó' que es crea amb l'ajuda del '
' etiqueta. - L'element botó conté a més un identificador assignat i un ' sobre el ratolí ” esdeveniment que anomena “ canvi de text() ” quan el ratolí passa per sobre.
Codi JavaScript
< guió >
era parentElement = document. getElementById ( 'el meuDiv' ) ;
var objectiu = document. getElementById ( 'btn' ) ;
era troba_me = parentElement. conté ( objectiu ) ;
si ( parentElement. conté ( objectiu ) == veritat ) {
consola. registre ( Troba'm ) ;
funció de canvi de text ( ) {
objectiu. textContent = 'Botó nou' ;
}
} altra cosa {
consola. registre ( 'No existeix' )
}
guió >Al fragment de codi anterior:
- La variable 'parentElement' aplica el ' getElementById() ” mètode per accedir a l'element div principal. La variable 'target' també utilitza el mètode 'getElementById()' per obtenir l'element del botó afegit mitjançant el seu identificador.
- La variable 'find_me' utilitza el ' conté () ” mètode per comprovar si l'element del botó objectiu és el fill del div o no. Aquest mètode tornarà ' veritat ” per “sí” en cas contrari “fals”.
- El ' si una altra cosa ” La sentència defineix un bloc de codi.
- Si l'element objectiu és el fill de l'element principal, aleshores el ' canvi de text() La funció canviarà el seu text mitjançant la textContent ' propietat. En cas contrari, el bloc de codi 'else' s'executarà per mostrar el missatge especificat mitjançant el ' console.log() ” mètode.
Sortida
La consola mostra un ' veritat ” valor booleà que verifica que l'element botó és el fill del div donat i, a continuació, el seu text canvia en passar el ratolí per sobre:
Diferència entre les propietats textContent, innerText i innerHTML?
Generalment, el ' textContent ”, “ text interior ”, i “ innerHTML ” Les propietats tracten amb el text d'un element o node en la manera de configurar-lo i obtenir-lo. Tanmateix, aquestes propietats són diferents entre si en funció d'alguns factors. En aquest apartat es destaquen les principals diferències entre tots ells:
Termes 'textContent' 'text intern' 'HTML intern' Tipus de retorn Retorna el text d'un element que inclou tots els seus fills (etiquetes de format), text ocult CSS i espai. No retorna les etiquetes HTML d'un element. Retorna el contingut de text de l'element HTML objectiu amb tots els seus fills (etiquetes de format). No retorna espai, text ocult CSS ni etiquetes HTML, excepte