El textContent en Javascript
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.
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.
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
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.
