La propietat textContent de JavaScript funciona per establir i obtenir el contingut de text de la pàgina. S'utilitza per passar i mostrar el contingut de text d'alguna informació, etiquetes i grans dimensions de dades i els seus nodes. El TextContent varia del nodeValue de l'etiqueta de l'script i retorna contingut dels nodes secundaris dels diversos tipus de dades.
Si el node és un node de text, una instrucció de processament o un comentari d'etiqueta, javascript textContent obté o estableix el text. El TextContent mostra la concatenació del textContent de cada node fill. Mostra les instruccions de processament i comentaris als altres tipus de nodes.
Sintaxi
Hi ha dues sintaxis disponibles per al contingut de text JavaScript. La primera sintaxi s'utilitza per establir el text d'un node, i la segona sintaxi s'utilitza per recuperar el text del node.
Sintaxi 1:
La sintaxi següent s'utilitza per configurar el text del node amb contingut textual.
prova d'atrapar catch java
Node_element.textContent = information;
Sintaxi 2:
La sintaxi següent utilitza contingut textual per obtenir el text del node.
Node_element.textContent;
Valor de retorn:
- Una cadena conté el text del node de sortida i el seu node fill. La sortida mostra un valor nul si un element és un document o tipus de document.
- Els nodes secundaris se substitueixen per un únic node Text utilitzant el conjunt de l'atribut textContent. L'atribut té una cadena específica com a contingut.
Exemples
Els exemples següents mostren el conjunt i obtenen els diferents tipus d'informació mitjançant l'atribut textContent.
Exemple 1
L'exemple següent utilitza contingut de text al javascript per establir la informació. Les dades del node mostren el text de les etiquetes.
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>'; } Sortida
La imatge següent mostra el conjunt de dades mitjançant el node de contingut.
Exemple 2
L'exemple següent utilitza contingut de text al javascript per obtenir la informació. Podem obtenir el valor del botó de la funció de 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; } Sortida
La imatge següent mostra el conjunt de dades mitjançant el node de contingut.
Exemple 3
L'exemple següent utilitza contingut de text al javascript per obtenir la informació. Podem obtenir el valor del botó de la funció de clic.
java per tipus de bucle
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; } Sortida
La imatge següent mostra el conjunt de dades mitjançant el node de contingut.
Exemple 4
L'exemple següent utilitza contingut de text al valor del botó per obtenir i establir la informació. Podem obtenir el valor després de fer clic al botó.
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; } Sortida
La imatge següent mostra el conjunt de dades mitjançant el node de contingut.
Exemple 5
L'exemple següent s'utilitza per obtenir i establir la informació mitjançant innerHtml, innerText i contingut de text al valor del botó. Podem obtenir la diferència en les dades de sortida després de fer clic al botó.
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!'; } Sortida
noms de ciutats dels EUA
La imatge següent mostra el conjunt de dades mitjançant el node de contingut.
Exemple 6
L'exemple següent s'utilitza per obtenir les dades de la llista i establir la informació mitjançant contingut de text al valor del botó on-click. Podem obtenir les dades de la llista i informació d'altres etiquetes.
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; } Sortida
La imatge següent mostra el conjunt de dades mitjançant el node de contingut.
Exemple 7
El contingut del text no admet dades buides si la informació o la cadena són buides. Mostra la cadena buida com a valor.
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.'; } } Sortida
La imatge següent mostra l'obtenció de les dades mitjançant el node de contingut de text.
Punt clau del contingut del text en javascript
- Quan la informació javascript elimina automàticament l'HTML, la utilització de textContent és segura.
- El contingut del text i la informació inclouen els espais i les etiquetes d'elements interiors. L'atribut innerHTML el retornarà.
- L'atribut innerText només retorna text sense espais ni etiquetes d'elements interns. La propietat textContent retorna text que inclou espais però exclou les etiquetes d'elements interns.
- Els valors de tots els nodes de text del subarbre es combinen i s'estableixen per al contingut de text i s'obtenen del contingut de text. Si un node no té fills, la cadena està buida.
- L'innerText retorna text que és llegible per les persones i incorpora qualsevol CSS. El contingut del text és difícil de llegir quan s'utilitzen etiquetes HTML a les dades.
- Quan s'estableix una propietat en un node, s'eliminen tots els seus fills i un sol node de text ocupa el seu lloc amb el valor especificat.
Conclusió
El contingut del text mostra diversos tipus d'informació. L'etiqueta html requeria informació i dades de llista que es mostraven mitjançant un únic mètode.