La proprietà JavaScript textContent funziona per impostare e ottenere il contenuto testuale della pagina. Viene utilizzato per passare e visualizzare il contenuto testuale di alcune informazioni, tag e dati di grandi dimensioni e i relativi nodi. Il TextContent varia dal nodeValue del tag script e restituisce il contenuto dai nodi figlio di più tipi di dati.
Se il nodo è un nodo di testo, un'istruzione di elaborazione o un'osservazione di tag, javascript textContent ottiene o imposta il testo. Il TextContent mostra la concatenazione del textContent di ciascun nodo figlio. Mostra le istruzioni di elaborazione e i commenti agli altri tipi di nodo.
Sintassi
Sono disponibili due sintassi per il contenuto di testo JavaScript. La prima sintassi utilizza per impostare il testo di un nodo e la seconda sintassi utilizza per recuperare il testo del nodo.
Sintassi 1:
La seguente sintassi utilizza per impostare il testo del nodo utilizzando il contenuto testuale.
assolutamente unico
Node_element.textContent = information;
Sintassi 2:
La seguente sintassi utilizza il contenuto testuale per ottenere il testo del nodo.
Node_element.textContent;
Valore di ritorno:
- Una stringa contiene il testo del nodo di output e del relativo nodo figlio. L'output mostra un valore null se un elemento è un documento o un tipo di documento.
- I nodi figlio vengono sostituiti da un singolo nodo Testo utilizzando il set dell'attributo textContent. L'attributo ha una stringa specifica come contenuto.
Esempi
Gli esempi seguenti mostrano l'insieme e ottengono i vari tipi di informazioni utilizzando l'attributo textContent.
Esempio 1
L'esempio seguente utilizza il contenuto testuale nel javascript per impostare le informazioni. I dati del nodo mostrano il testo dei tag.
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>'; } Produzione
L'immagine seguente mostra l'insieme dei dati utilizzando il nodo contenuto.
Esempio 2
L'esempio seguente utilizza il contenuto testuale in JavaScript per ottenere le informazioni. Possiamo ottenere il valore del pulsante della funzione 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; } Produzione
L'immagine seguente mostra l'insieme dei dati utilizzando il nodo contenuto.
Esempio 3
L'esempio seguente utilizza il contenuto testuale in JavaScript per ottenere le informazioni. Possiamo ottenere il valore del pulsante della funzione clic.
ordinamento degli elenchi java
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; } Produzione
L'immagine seguente mostra l'insieme dei dati utilizzando il nodo contenuto.
Esempio4
L'esempio seguente utilizza il contenuto di testo sul valore del pulsante per ottenere e impostare le informazioni. Possiamo ottenere il valore dopo aver fatto clic sul pulsante.
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; } Produzione
L'immagine seguente mostra l'insieme dei dati utilizzando il nodo contenuto.
Esempio5
L'esempio seguente viene utilizzato per ottenere e impostare le informazioni utilizzando innerHtml, innerText e il contenuto di testo sul valore del pulsante. Possiamo ottenere la differenza nei dati di output dopo aver fatto clic sul pulsante.
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!'; } Produzione
L'immagine seguente mostra l'insieme dei dati utilizzando il nodo contenuto.
Esempio 6
L'esempio seguente utilizza per ottenere i dati dell'elenco e impostare le informazioni utilizzando il contenuto di testo sul valore del pulsante onclick. Possiamo ottenere i dati dell'elenco e altre informazioni sui tag.
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; } Produzione
L'immagine seguente mostra l'insieme dei dati utilizzando il nodo contenuto.
Esempio 7
Il contenuto testuale non supporta dati vuoti se le informazioni o la stringa sono vuote. Mostra la stringa vuota come valore.
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.'; } } Produzione
Unità logica aritmetica
L'immagine seguente mostra il nodo per ottenere i dati utilizzando il contenuto di testo.
Punto chiave del contenuto testuale in javascript
- Quando le informazioni JavaScript rimuovono automaticamente l'HTML, l'utilizzo di textContent è sicuro.
- Il contenuto testuale e le informazioni includono gli spazi e i tag degli elementi interni. L'attributo innerHTML lo restituirà.
- L'attributo innerText restituisce solo testo senza spazi o tag di elementi interni. La proprietà textContent restituisce il testo che include spazi ma esclude i tag degli elementi interni.
- I valori di tutti i nodi di testo nel sottoalbero vengono combinati e impostati per il contenuto di testo e ottenuti dal contenuto di testo. Se un nodo non ha figli, la stringa è vuota.
- Il testo interno restituisce testo che è leggibile dall'uomo e si inserisce in qualsiasi CSS. Il contenuto del testo è difficile da leggere quando nei dati vengono utilizzati tag html.
- Quando una proprietà è impostata su un nodo, tutti i suoi figli vengono rimossi e un singolo nodo di testo prende il suo posto con il valore specificato.
Conclusione
Il contenuto testuale visualizza più tipi di informazioni. Il tag html richiede informazioni ed elenca i dati mostrati utilizzando un unico metodo.