Questa guida illustrerà come accedere e manipolare la proprietà 'textContent' dell'elemento DOM HTML in JavaScript.
Innanzitutto, dai un'occhiata alle nozioni di base della proprietà 'textContent' del DOM HTML.
Qual è la proprietà 'textContent' del DOM HTML in JavaScript?
IL ' testoContenuto ' è la proprietà incorporata che imposta, recupera e modifica il testo di un elemento o nodo specificato, inclusi tutti i suoi discendenti. I discendenti sono elementi secondari come , , e molti altri utilizzati per scopi di formattazione. Durante l'impostazione del testo utilizzando la proprietà “textContent”, i discendenti dell'elemento di destinazione vengono completamente sostituiti con il nuovo testo.
Sintassi (imposta contenuto testuale)
La sintassi base per impostare il testo di un elemento/nodo utilizzando il comando “ testoContenuto ” proprietà è scritta di seguito:
elemento. testoContenuto = testo | nodo. testoContenuto = testo
La sintassi precedente accetta il desiderato “ testo ' come valore che l'utente desidera impostare per un elemento o nodo.
Sintassi (Ottieni contenuto testuale)
La sintassi generalizzata per restituire il testo di un elemento o nodo tramite il comando “ testoContenuto 'la proprietà è indicata qui:
elemento. testoContenuto | nodo. testoContenutoValore di ritorno: IL ' testoContenuto La proprietà ' restituisce il ' testo ' di un elemento o nodo con spaziatura ma senza i tag HTML interni.
Ora utilizza praticamente le sintassi sopra definite per accedere e manipolare la proprietà “textContent”.
Come accedere e manipolare la proprietà 'textContent' dell'elemento DOM HTML in JavaScript?
Simile alle proprietà “innerHTML” e “innerText”, il “ testoContenuto ' consente inoltre agli utenti di impostare, accedere e modificare facilmente il testo dell'elemento desiderato. Questa sezione esegue tutte queste operazioni su un elemento utilizzando gli esempi indicati di seguito.
Esempio 1: applicazione della proprietà “textContent” per accedere al testo dell'elemento/nodo
Questo esempio applica la proprietà 'textContent' per restituire il testo di un particolare elemento o nodo inclusi tutti i suoi figli.
Codice HTML
< div id = 'mioDiv' al passaggio del mouse = 'getText()' stile = 'bordo: 3px nero pieno; larghezza: 400px; riempimento: 5px 5px; margine: automatico;' >< h1 > Prima rubrica < / h1 >
< h2 > Seconda rubrica < / h2 >
< h3 > Terza rubrica < / h3 >
< h4 > Quarta rubrica < / h4 >
< h5 > Quinto titolo < / h5 >
< h6 > Sesto titolo < / h6 >
< / div >
Nelle righe di codice HTML sopra:
- IL ' ' con un ID 'myDiv' crea un elemento div a cui vengono applicate le seguenti proprietà border, width, padding (superiore e inferiore, sinistro e destro) e margine. Si allega inoltre il “ al passaggio del mouse ' evento che richiama il ' getText() 'funzione quando l'utente passa il mouse su di esso.
- All'interno del div, tutti i tag di intestazione specificati (h1,h2,h3,h4,h5 e h6) inseriscono gli elementi di intestazione in base ai livelli specificati.
Codice JavaScript
< sceneggiatura >
funzione getText ( ) {
era elem = documento. getElementById ( 'mioDiv' ) ;
mettere in guardia ( elemento. testoContenuto ) ;
}
sceneggiatura >Nel blocco di codice JavaScript sopra scritto:
- Definire una funzione denominata ' getText() ”.
- All'interno di questa funzione, la variabile “elem” applica il “ getElementById() ” per accedere all'elemento div tramite il suo id.
- IL ' mettere in guardia() Il metodo crea una casella di avviso che utilizza il metodo ' testoContenuto ' per restituire il testo del div genitore insieme a tutti i suoi dipendenti.
Produzione
L'output seguente visualizza una finestra di avviso che mostra il contenuto testuale dell'elemento div:
Esempio 2: applicazione della proprietà 'textContent' per sostituire un contenuto testuale di un elemento inclusi i suoi discendenti
Questo esempio mostra come la proprietà 'textContent' sostituisce tutti i figli di un elemento modificandone il testo.
Codice HTML
< centro >
< h1 id = 'la mia testa' al clic = 'modificatesto()' >< B > Questo B > È < arco > Intestazione < arco > < io > Elemento io > h1 >
centro >Nelle righe di codice sopra indicate:
- IL ' Il tag ' aggiunge un elemento di intestazione di livello 1 con allegato ' al clic ' evento che richiama il ' modificatesto() ' funzione quando l'utente fa clic su di esso.
- L'elemento dell'intestazione contiene anche il ' ', ' ', E ' ' tagga come suoi discendenti. Il tag ' ' viene utilizzato per mettere in grassetto la stringa racchiusa, il tag '' senza alcuna proprietà di stile viene utilizzato per non applicare alcuno stile alla stringa specificata e il tag ' ' viene utilizzato per visualizzare il stringa specificata in corsivo.
Codice JavaScript
< sceneggiatura >
dove h1 = documento. getElementById ( 'la mia testa' ) ;
consolle. tronco d'albero ( h1 ) ;
funzione modificaTesto ( ) {
h1. testoContenuto = 'Benvenuti in Linuxhint!' ;
consolle. tronco d'albero ( h1 )
}
sceneggiatura >Nel codice JavaScript sopra:
- La variabile 'h1' utilizza il ' document.getElementById() ' per accedere all'elemento di intestazione tramite l'ID assegnato.
- IL ' console.log() ' Il metodo visualizza l'elemento di intestazione a cui si accede sulla console prima di modificarne il contenuto.
- La funzione denominata ' modificatesto() ' usa il ' testoContenuto 'proprietà per modificare il testo dell'elemento di intestazione recuperato.
- L'ultimo metodo 'console.log()' visualizza nuovamente il valore 'h1' dopo la modifica.
Produzione
La console mostra chiaramente che tutti i figli dell'elemento di intestazione specificato sono stati sostituiti con il testo appena specificato facendo clic su di esso:
Esempio 3: applicazione della proprietà 'textContent' per modificare il testo del figlio dell'elemento
Questo esempio utilizza la proprietà 'textContent' per modificare il testo del figlio dell'elemento specifico.
Codice HTML
< div id = 'mioDiv' stile = 'bordo: 3px nero pieno; larghezza: 400px; riempimento: 5px 5px; margine: automatico;' >
< centro >
< pulsante id = 'btn' al passaggio del mouse = 'cambiatesto()' > Vecchio pulsante < / pulsante >
< / centro >
< / div >In questo scenario:
- L'elemento 'div' ha un elemento 'pulsante' che viene creato con l'aiuto del comando '
' etichetta. - L'elemento pulsante contiene inoltre un ID assegnato e un ' al passaggio del mouse ” evento che richiama il “ cambiatesto() ' funziona quando il mouse ci passa sopra.
Codice JavaScript
< sceneggiatura >
era parentElement = documento. getElementById ( 'mioDiv' ) ;
destinazione var = documento. getElementById ( 'btn' ) ;
era trovami = parentElement. contiene ( bersaglio ) ;
Se ( parentElement. contiene ( bersaglio ) == VERO ) {
consolle. tronco d'albero ( Trovami ) ;
modifica della funzioneTesto ( ) {
bersaglio. testoContenuto = 'Nuovo pulsante' ;
}
} altro {
consolle. tronco d'albero ( 'Non esiste' )
}
sceneggiatura >Nello snippet di codice sopra:
- La variabile 'parentElement' applica il ' getElementById() ' per accedere all'elemento div genitore. La variabile 'target' utilizza anche il metodo 'getElementById()' per recuperare l'elemento pulsante aggiunto utilizzando il suo id.
- La variabile 'find_me' utilizza il ' contiene() ' metodo per verificare se l'elemento del pulsante target è figlio del div o meno. Questo metodo restituirà “ VERO ” per “sì” altrimenti “falso”.
- IL ' se altro ' L'istruzione definisce un blocco di codice.
- Se l'elemento target è il figlio dell'elemento genitore, allora il ' cambiatesto() La funzione ' cambierà il suo testo tramite il pulsante ' testoContenuto ' proprietà. Altrimenti, verrà eseguito il blocco di codice “else” per visualizzare il messaggio specificato utilizzando il comando “ console.log() ' metodo.
Produzione
La console mostra un ' VERO 'valore booleano che verifica che l'elemento pulsante sia figlio del div specificato e quindi il suo testo cambia quando si passa il mouse su di esso:
Differenza tra proprietà textContent, innerText e innerHTML?
In genere, il “ testoContenuto ', ' testointerno ', E ' innerHTML Le proprietà 'si occupano del testo di un elemento o nodo nel modo di impostarlo e ottenerlo. Tuttavia, queste proprietà sono diverse l'una dall'altra in base ad alcuni fattori. Questa sezione evidenzia le principali differenze tra tutti loro:
Termini 'Contenutotesto' 'testointerno' “HTML interno” Tipo di reso Restituisce il testo di un elemento inclusi tutti i suoi figli (tag di formattazione), testo nascosto CSS e spazio. Non restituisce i tag HTML di un elemento. Restituisce il contenuto testuale dell'elemento HTML di destinazione con tutti i suoi figli (tag di formattazione). Non restituisce spazio, testo nascosto CSS e tag HTML tranne