JavaScript textContent -ominaisuus määrittää ja hakee sivun tekstisisältöä. Sitä käytetään joidenkin tietojen, tunnisteiden ja suuren tiedon ja sen solmujen tekstisisällön välittämiseen ja näyttämiseen. TextContent vaihtelee komentosarjatunnisteen nodeValue-arvosta ja palauttaa sisällön useiden tietotyyppien alisolmuista.

Jos solmu on tekstisolmu, käsittelykäsky tai tunnistehuomautus, javascript textContent hakee tai asettaa tekstin. TextContent näyttää kunkin lapsisolmun textContent-sisällön ketjutuksen. Se näyttää käsittelyohjeet ja kommentit muille solmutyypeille.

Syntaksi

JavaScript-tekstisisällölle on saatavilla kaksi syntaksia. Ensimmäistä syntaksia käytetään solmun tekstin asettamiseen ja toista syntaksia käyttää solmun tekstin hakemiseen.

Syntaksi 1:

Seuraavaa syntaksia käytetään solmun tekstin asettamiseen tekstisisällön avulla.

len of merkkijono javassa

 Node_element.textContent = information; 

Syntaksi 2:

Seuraava syntaksi käyttää tekstisisältöä solmun tekstin saamiseksi.

 Node_element.textContent; 

Palautusarvo:

• Merkkijono sisältää tulossolmun ja sen lapsisolmun tekstin. Tulos näyttää nolla-arvon, jos elementti on dokumentti tai dokumenttityyppi.
• Lapsisolmut korvataan yhdellä tekstisolmulla käyttämällä textContent-attribuuttijoukkoa. Attribuutilla on sisältönä tietty merkkijono.

Esimerkkejä

Seuraavat esimerkit näyttävät joukon ja saavat erityyppisiä tietoja textContent-attribuutin avulla.

Esimerkki 1

Seuraava esimerkki käyttää javascriptin tekstisisältöä tietojen asettamiseen. Solmutiedot näyttävät tunnisteiden tekstin.

 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(&apos;textContent_information&apos;); ele.textContent = &apos; <i> JavaScript </i> <h2> Set or get the content of node </h2>&apos;; } 

Lähtö

Seuraava kuva näyttää joukon tiedot sisältösolmun avulla.

Esimerkki 2

Seuraava esimerkki käyttää javascriptin tekstisisältöä tietojen saamiseksi. Saamme napsautustoiminnon painikkeen arvon.

 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(&apos;myData1&apos;).textContent; function fdisplay() { document.getElementById(&apos;textContent_information&apos;).textContent = text_in; } 

Lähtö

Seuraava kuva näyttää joukon tiedot sisältösolmun avulla.

Esimerkki 3

Seuraava esimerkki käyttää javascriptin tekstisisältöä tietojen saamiseksi. Saamme napsautustoiminnon painikkeen arvon.

xml kommentti

 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(&apos;value&apos;).textContent; document.getElementById(&apos;textContent_information&apos;).textContent = text_in; } 

Lähtö

Seuraava kuva näyttää joukon tiedot sisältösolmun avulla.

Esimerkki4

Seuraava esimerkki käyttää painikkeen arvon tekstisisältöä tietojen hakemiseen ja asettamiseen. Voimme saada arvon napsauttamalla painiketta.

 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(&apos;value&apos;).textContent = &apos;the information of the node has been changed using click function!&apos;; var text_in = document.getElementById(&apos;info&apos;).textContent; document.getElementById(&apos;values&apos;).textContent = text_in; } 

Lähtö

Seuraava kuva näyttää joukon tiedot sisältösolmun avulla.

Esimerkki5

Seuraava esimerkki käyttää tietojen hankkimiseen ja asettamiseen käyttämällä innerHtml-, innerText- ja tekstisisältöä painikkeen arvossa. Saatamme eron tulostiedoissa napsauttamalla painiketta.

 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(&apos;finfo&apos;).innerHTML = &apos; <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!&apos;; } function sdisplay() { document.getElementById(&apos;sinfo&apos;).innerText = &apos; <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!&apos;; } function tdisplay() { document.getElementById(&apos;tinfo&apos;).textContent = &apos; <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!&apos;; } 

Lähtö

Seuraava kuva näyttää joukon tiedot sisältösolmun avulla.

Esimerkki 6

Seuraava esimerkki käyttää luettelotietojen hakemiseen ja tietojen asettamiseen tekstisisällön avulla onclick-painikkeen arvossa. Voimme saada luettelon tiedot ja muut tunnistetiedot.

 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(&apos;students&apos;).textContent; document.getElementById(&apos;tinfo&apos;).textContent = students; } 

Lähtö

Seuraava kuva näyttää joukon tiedot sisältösolmun avulla.

Esimerkki 7

Tekstisisältö ei tue tyhjiä tietoja, jos tieto tai merkkijono on tyhjä. Se näyttää tyhjän merkkijonon arvona.

 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(&apos;students&apos;).textContent; console.log(students); if(students != &apos;&apos;){ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node does not available of the student parent node.&apos;; }else{ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node is available of the student parent node.&apos;; } } 

Lähtö

dynaaminen ohjelmointi

Seuraava kuva näyttää tietojen hakemisen tekstisisältösolmun avulla.

Tekstisisällön avainkohta javascriptissä

• Kun javascript-tiedot poistavat automaattisesti HTML:n, textContentin käyttö on turvallista.
• Tekstin sisältö ja tiedot sisältävät välilyönnit ja sisäelementin tagit. InnerHTML-attribuutti palauttaa sen.
• InnerText-attribuutti palauttaa vain tekstiä ilman välilyöntejä tai sisäelementtitageja. textContent-ominaisuus palauttaa tekstin, joka sisältää välilyönnit, mutta ei sisällä sisäelementtitunnisteita.
• Kaikkien alipuun tekstisolmujen arvot yhdistetään ja asetetaan tekstisisällölle ja saadaan tekstisisällöstä. Jos solmulla ei ole lapsia, merkkijono on tyhjä.
• InnerText palauttaa tekstin, joka on ihmisen luettavissa ja joka sopii mihin tahansa CSS:ään. Tekstisisältöä on vaikea lukea, kun tiedoissa käytetään html-tageja.
• Kun ominaisuus asetetaan solmulle, kaikki sen alat poistetaan ja yksi tekstisolmu ottaa sen tilalle määritetyllä arvolla.

Johtopäätös

Tekstisisältö näyttää monenlaista tietoa. html-tunniste vaati tietoja ja luettelotietoja, jotka näytettiin yhdellä menetelmällä.