JavaScript textContent-egenskapen fungerer for å angi og hente sidens tekstinnhold. Den brukes til å sende og vise tekstinnholdet til noe informasjon, tagger og store datastørrelser og noder. TextContent varierer fra nodeValue til skripttaggen og returnerer innhold fra underordnede noder av flere datatyper.
Hvis noden er en tekstnode, en behandlingsinstruksjon eller en merkelapp, henter eller setter javascript textContent teksten. TextContent viser sammenkoblingen av textContent for hver underordnede node. Den viser behandlingsinstruksjonene og kommentarer til de andre nodetypene.
Syntaks
Det er to syntakser tilgjengelig for JavaScript-tekstinnholdet. Den første syntaksen brukes til å angi teksten til en node, og den andre syntaksen brukes til å hente nodens tekst.
Syntaks 1:
Følgende syntaks brukes til å angi nodens tekst ved hjelp av tekstinnhold.
java generere tilfeldig tall
Node_element.textContent = information;
Syntaks 2:
Følgende syntaks bruker tekstinnhold for å hente nodens tekst.
Node_element.textContent;
Returverdi:
- En streng inneholder teksten til utdatanoden og dens underordnede node. Utdataene viser en nullverdi hvis et element er et dokument eller en dokumenttype.
- De underordnede nodene erstattes av en enkelt tekstnode ved å bruke settet med textContent-attributtet. Attributtet har en bestemt streng som innhold.
Eksempler
Følgende eksempler viser settet og får de forskjellige typene informasjon ved å bruke textContent-attributtet.
Eksempel 1
Følgende eksempel bruker tekstinnhold i javascriptet for å angi informasjonen. Nodedataene viser teksten til taggene.
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>'; } Produksjon
Følgende bilde viser settet dataene ved hjelp av innholdsnoden.
string.compare c#
Eksempel 2
Følgende eksempel bruker tekstinnhold i javascriptet for å få informasjonen. Vi kan få verdien av klikkfunksjonens knapp.
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; } Produksjon
Følgende bilde viser settet dataene ved hjelp av innholdsnoden.
Eksempel 3
Følgende eksempel bruker tekstinnhold i javascriptet for å få informasjonen. Vi kan få verdien av klikkfunksjonens knapp.
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; } Produksjon
Følgende bilde viser settet dataene ved hjelp av innholdsnoden.
Eksempel 4
Følgende eksempel bruker tekstinnhold på knappenverdien for å hente og angi informasjonen. Vi kan få verdien etter å ha klikket på knappen.
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; } Produksjon
Følgende bilde viser settet dataene ved hjelp av innholdsnoden.
Eksempel 5
Følgende eksempel brukes til å hente og angi informasjonen ved hjelp av innerHtml, innerText og tekstinnhold på knappenverdien. Vi kan få forskjellen i utdataene etter å ha klikket på knappen.
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!'; } Produksjon
Følgende bilde viser settet dataene ved hjelp av innholdsnoden.
Eksempel 6
Følgende eksempel brukes til å hente listedata og angi informasjonen ved hjelp av tekstinnhold på onclick-knappens verdi. Vi kan få informasjon om listen og annen taggerinformasjon.
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; } Produksjon
Følgende bilde viser settet dataene ved hjelp av innholdsnoden.
Eksempel 7
hvor mange byer i USA
Tekstinnholdet støtter ikke tomme data hvis informasjon eller streng er tom. Den viser den tomme strengen som en verdi.
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.'; } } Produksjon
Følgende bilde viser hent dataene ved hjelp av tekstinnholdsnoden.
Nøkkelpunkt for tekstinnholdet i javascript
- Når javascript-informasjon automatisk fjerner HTML, er bruken av textContent sikker.
- Tekstinnholdet og informasjonen inkluderer mellomrommene og de indre elementkodene. InnerHTML-attributtet vil returnere det.
- InnerText-attributtet returnerer bare tekst uten mellomrom eller indre element-tags. Egenskapen textContent returnerer tekst som inkluderer mellomrom, men som ekskluderer tagger for indre element.
- Verdiene til alle tekstnodene i undertreet er kombinert og satt for tekstinnhold og hentes fra tekstinnholdet. Hvis en node ikke har noen barn, er strengen tom.
- InnerText returnerer tekst som er lesbar for mennesker og tar inn i enhver CSS. Tekstinnholdet er vanskelig å lese når html-tagger brukes i dataene.
- Når en egenskap er satt på en node, fjernes alle dens underordnede, og en enkelt tekstnode tar plass med den angitte verdien.
Konklusjon
Tekstinnholdet viser flere typer informasjon. HTML-taggen krevde informasjon og listedata vist med én enkelt metode.