JavaScript textContent-egenskaben arbejder for at indstille og hente sidens tekstindhold. Det bruges til at videregive og vise tekstindholdet i nogle oplysninger, tags og store datastørrelser og dets noder. TextContent varierer fra nodeValue af script-tagget og returnerer indhold fra underordnede noder af flere datatyper.
Hvis noden er en tekstnode, en behandlingsinstruktion eller en tagbemærkning, så henter eller sætter javascript textContent teksten. TextContent viser sammenkædningen af tekstContent for hver underordnet node. Den viser behandlingsinstruktionerne og kommentarer til de andre nodetyper.
Syntaks
Der er to tilgængelige syntakser for JavaScript-tekstindholdet. Den første syntaks bruges til at indstille teksten i en node, og den anden syntaks bruges til at hente nodens tekst.
Syntaks 1:
Følgende syntaks bruges til at indstille nodens tekst ved hjælp af tekstindhold.
java generere tilfældige tal
Node_element.textContent = information;
Syntaks 2:
Følgende syntaks bruger tekstindhold til at hente nodens tekst.
Node_element.textContent;
Returværdi:
- En streng indeholder teksten fra outputknuden og dens underordnede node. Outputtet viser en nulværdi, hvis et element er et dokument eller en dokumenttype.
- De underordnede noder erstattes af en enkelt tekstknude ved hjælp af sættet af textContent-attributten. Attributten har en bestemt streng som indhold.
Eksempler
De følgende eksempler viser sættet og få de forskellige typer information ved hjælp af textContent-attributten.
Eksempel 1
Følgende eksempel bruger tekstindhold i javascriptet til at indstille oplysningerne. Nodedataene viser teksten af 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>'; } Produktion
Følgende billede viser sæt dataene ved hjælp af indholdsknuden.
string.compare c#
Eksempel 2
Følgende eksempel bruger tekstindhold i javascriptet til at få oplysningerne. Vi kan få værdien af klikfunktionens knap.
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; } Produktion
Følgende billede viser sæt dataene ved hjælp af indholdsknuden.
Eksempel 3
Følgende eksempel bruger tekstindhold i javascriptet til at få oplysningerne. Vi kan få værdien af klikfunktionens knap.
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; } Produktion
Følgende billede viser sæt dataene ved hjælp af indholdsknuden.
Eksempel 4
Følgende eksempel bruger tekstindhold på knapværdien til at hente og indstille oplysningerne. Vi kan få værdien efter at have 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; } Produktion
Følgende billede viser sæt dataene ved hjælp af indholdsknuden.
Eksempel 5
Følgende eksempel bruges til at hente og indstille oplysningerne ved hjælp af innerHtml, innerText og tekstindhold på knapværdien. Vi kan få forskellen i outputdataene efter at have 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!'; } Produktion
Følgende billede viser sæt dataene ved hjælp af indholdsknuden.
Eksempel 6
Følgende eksempel bruges til at hente listedata og indstille oplysningerne ved hjælp af tekstindhold på onclick-knappens værdi. Vi kan få data fra listen og andre tagoplysninger.
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; } Produktion
Følgende billede viser sæt dataene ved hjælp af indholdsknuden.
Eksempel 7
hvor mange byer i USA
Tekstindholdet understøtter ikke tomme data, hvis information eller streng er tom. Den viser den tomme streng som en værdi.
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.'; } } Produktion
Følgende billede viser hent data ved hjælp af tekstindholdsknude.
Nøglepunkt for tekstindholdet i javascript
- Når javascript-oplysninger automatisk fjerner HTML, så er brugen af textContent sikker.
- Tekstindholdet og informationen omfatter mellemrummene og de indre element-tags. InnerHTML-attributten vil returnere den.
- InnerText-attributten returnerer kun tekst uden mellemrum eller indre element-tags. Egenskaben textContent returnerer tekst, der inkluderer mellemrum, men som udelukker indre element-tags.
- Værdierne for alle tekstnoder i undertræet kombineres og indstilles til tekstindhold og hentes fra tekstindholdet. Hvis en node ikke har nogen børn, er strengen tom.
- InnerText returnerer tekst, som er menneskeligt læsbar og tager med i enhver CSS. Tekstindholdet er svært at læse, når der bruges html-tags i dataene.
- Når en egenskab er sat på en node, fjernes alle dens underordnede elementer, og en enkelt tekstnode indtager dens plads med den angivne værdi.
Konklusion
Tekstindholdet viser flere typer information. HTML-tagget krævede oplysninger og listedata vist ved hjælp af en enkelt metode.