De JavaScript-eigenschap textContent werkt om de tekstinhoud van de pagina in te stellen en op te halen. Het wordt gebruikt om de tekstinhoud van bepaalde informatie, tags en grote hoeveelheden gegevens en de knooppunten ervan door te geven en weer te geven. De TextContent varieert van de nodeValue van de scripttag en retourneert inhoud van onderliggende knooppunten van de meerdere gegevenstypen.
Als het knooppunt een tekstknooppunt, een verwerkingsinstructie of een tagopmerking is, haalt of stelt javascript textContent de tekst in. De TextContent toont de aaneenschakeling van de textContent van elk onderliggend knooppunt. Het toont de verwerkingsinstructies en opmerkingen voor de andere knooppunttypen.
Syntaxis
Er zijn twee syntaxis beschikbaar voor de JavaScript-tekstinhoud. De eerste syntaxis wordt gebruikt om de tekst van een knooppunt in te stellen, en de tweede syntaxis gebruikt om de tekst van het knooppunt op te halen.
Syntaxis 1:
De volgende syntaxis wordt gebruikt om de tekst van het knooppunt in te stellen met behulp van tekstuele inhoud.
toevoegen aan array-java
Node_element.textContent = information;
Syntaxis 2:
De volgende syntaxis gebruikt tekstuele inhoud om de tekst van het knooppunt op te halen.
Node_element.textContent;
Winstwaarde:
- Een string bevat de tekst van het uitvoerknooppunt en het onderliggende knooppunt. De uitvoer toont een nulwaarde als een element een document of documenttype is.
- De onderliggende knooppunten worden vervangen door een enkel tekstknooppunt met behulp van de set van het textContent-attribuut. Het attribuut heeft een specifieke string als inhoud.
Voorbeelden
De volgende voorbeelden tonen de set en halen de verschillende soorten informatie op met behulp van het kenmerk textContent.
voorbeeld 1
In het volgende voorbeeld wordt tekstinhoud in JavaScript gebruikt om de informatie in te stellen. De knooppuntgegevens tonen de tekst van de tags.
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>'; } Uitvoer
De volgende afbeelding toont hoe de gegevens zijn ingesteld met behulp van het inhoudsknooppunt.
mijnlevencriclet
Voorbeeld 2
In het volgende voorbeeld wordt tekstinhoud in JavaScript gebruikt om de informatie op te halen. We kunnen de waarde van de knop van de klikfunctie achterhalen.
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; } Uitvoer
De volgende afbeelding toont hoe de gegevens zijn ingesteld met behulp van het inhoudsknooppunt.
Voorbeeld 3
In het volgende voorbeeld wordt tekstinhoud in JavaScript gebruikt om de informatie op te halen. We kunnen de waarde van de knop van de klikfunctie achterhalen.
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; } Uitvoer
De volgende afbeelding toont hoe de gegevens zijn ingesteld met behulp van het inhoudsknooppunt.
Voorbeeld4
In het volgende voorbeeld wordt tekstinhoud op de knopwaarde gebruikt om de informatie op te halen en in te stellen. We kunnen de waarde krijgen nadat we op de knop hebben geklikt.
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; } Uitvoer
De volgende afbeelding toont hoe de gegevens zijn ingesteld met behulp van het inhoudsknooppunt.
Voorbeeld5
JavaScript-trim-subtekenreeks
In het volgende voorbeeld wordt gebruikt om de informatie op te halen en in te stellen met behulp van innerHtml, innerText en tekstinhoud op de knopwaarde. We kunnen het verschil in de uitvoergegevens krijgen nadat we op de knop hebben geklikt.
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!'; } Uitvoer
De volgende afbeelding toont hoe de gegevens zijn ingesteld met behulp van het inhoudsknooppunt.
Voorbeeld 6
In het volgende voorbeeld worden de lijstgegevens opgehaald en de informatie ingesteld met behulp van tekstinhoud op de onclick-knopwaarde. We kunnen de gegevens van de lijst en andere tagsinformatie verkrijgen.
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; } Uitvoer
De volgende afbeelding toont hoe de gegevens zijn ingesteld met behulp van het inhoudsknooppunt.
Voorbeeld 7
De tekstinhoud ondersteunt geen lege gegevens als de informatie of tekenreeks leeg is. Het toont de lege string als een waarde.
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.'; } } Uitvoer
De volgende afbeelding toont hoe u de gegevens kunt ophalen met behulp van het knooppunt voor tekstinhoud.
Kernpunt van de tekstinhoud in javascript
- Wanneer JavaScript-informatie HTML automatisch verwijdert, is het gebruik van textContent veilig.
- De tekstinhoud en informatie omvatten de spaties en de tags voor het binnenste element. Het innerHTML attribuut retourneert dit.
- Het innerText attribuut retourneert alleen tekst zonder spaties of tags voor binnenste elementen. De eigenschap textContent retourneert tekst die spaties bevat, maar tags voor interne elementen uitsluit.
- De waarden van alle tekstknooppunten in de subboom worden gecombineerd en ingesteld voor tekstinhoud en komen voort uit de tekstinhoud. Als een knooppunt geen kinderen heeft, is de string leeg.
- De innerText retourneert tekst die voor mensen leesbaar is en die in elke CSS kan worden opgenomen. De tekstinhoud is moeilijk te lezen wanneer html-tags in de gegevens worden gebruikt.
- Wanneer een eigenschap op een knooppunt wordt ingesteld, worden alle onderliggende objecten verwijderd en neemt een enkel tekstknooppunt zijn plaats in met de opgegeven waarde.
Conclusie
De tekstinhoud geeft meerdere soorten informatie weer. De html-tag vereiste informatie en lijstgegevens die met één enkele methode werden weergegeven.