Tämä opas havainnollistaa, kuinka JavaScriptin HTML DOM -elementin 'textContent' -ominaisuutta voidaan käyttää ja käsitellä.
Tutustu ensin HTML DOM 'textContent' -ominaisuuden perusteisiin.
Mikä on JavaScriptin HTML DOM 'textContent' -ominaisuus?
' tekstisisältö ” on sisäänrakennettu ominaisuus, joka asettaa, hakee ja muokkaa tietyn elementin tai solmun tekstiä, mukaan lukien kaikki sen jälkeläiset. Jälkeläiset ovat alielementtejä, kuten , , ja paljon muuta, joita käytetään muotoilutarkoituksiin. Kun tekstiä asetetaan 'textContent'-ominaisuuden avulla, kohdeelementin jälkeläiset korvataan kokonaan uudella tekstillä.
Syntaksi (määritä tekstisisältö)
Perussyntaksi elementin/solmun tekstin asettamiseen käyttämällä ' tekstisisältö ' omaisuus on kirjoitettu alla:
elementti. tekstisisältö = teksti | solmu. tekstisisältö = teksti
Yllä oleva syntaksi ottaa halutun ' teksti ” arvona, jonka käyttäjä haluaa asettaa elementille tai solmulle.
Syntaksi (Hae tekstisisältö)
Yleistetty syntaksi elementin tai solmun tekstin palauttamiseksi ' tekstisisältö ' omaisuus ilmoitetaan tässä:
elementti. tekstisisältö | solmu. tekstisisältöPalautusarvo: ' tekstisisältö ' omaisuus palauttaa ' teksti ” elementin tai solmun välilyönnillä, mutta ilman sisäisiä HTML-tageja.
Käytä nyt yllä määriteltyjä syntakseja käytännössä päästäksesi käsiksi ja manipuloimaan 'textContent' -ominaisuutta.
Kuinka käyttää ja käsitellä HTML DOM -elementin 'textContent' -ominaisuutta JavaScriptissä?
Kuten 'innerHTML' ja 'innerText' ominaisuudet, ' tekstisisältö ”-ominaisuuden avulla käyttäjät voivat myös asettaa, käyttää ja muokata halutun elementin tekstiä helposti. Tämä osa suorittaa kaikki nämä toiminnot elementille alla olevien esimerkkien avulla.
Esimerkki 1: 'textContent'-ominaisuuden käyttäminen elementin/solmun tekstin käyttämiseksi
Tämä esimerkki käyttää 'textContent'-ominaisuutta palauttamaan tietyn elementin tai solmun tekstin, mukaan lukien kaikki sen alat.
HTML-koodi
< div id = 'myDiv' hiiren päällä = 'getText()' tyyli = 'reuna: 3px kiinteä musta;leveys: 400px; täyte: 5px 5px; margin: auto;' >< h1 > Ensimmäinen otsikko < / h1 >
< h2 > Toinen otsikko < / h2 >
< h3 > Kolmas otsikko < / h3 >
< h4 > Neljäs otsikko < / h4 >
< h5 > Viides otsikko < / h5 >
< h6 > Kuudes otsikko < / h6 >
< / div >
Yllä olevilla HTML-koodin riveillä:
- ' ' -tunniste, jolla on tunnus 'myDiv', luo div-elementin, joka on tyylitelty seuraavilla ominaisuuksilla reunus, leveys, täyte (ylä ja ala, vasen ja oikea) ja marginaali. Se liittää myös ' hiiren päällä 'tapahtuma, joka kutsuu ' getText() ”-toimintoa, kun käyttäjä vie hiiren sen päälle.
- Div:n sisällä kaikki määritetyt otsikkotunnisteet (h1,h2,h3,h4,h5 ja h6) lisäävät otsikkoelementit määritettyjen tasojen mukaan.
JavaScript-koodi
< käsikirjoitus >
funktio getText ( ) {
oli elem = asiakirja. getElementById ( 'myDiv' ) ;
hälytys ( elementti. tekstisisältö ) ;
}
käsikirjoitus >Yllä kirjoitetussa JavaScript-koodilohkossa:
- Määritä funktio nimeltä ' getText() ”.
- Tämän funktion sisällä 'elem'-muuttuja käyttää ' getElementById() ” -menetelmää div-elementtiin pääsemiseksi sen tunnuksen kautta.
- ' hälytys() ' -menetelmä luo hälytysruudun, joka käyttää ' tekstisisältö ”-ominaisuutta palauttaa ylätason div tekstin ja kaikki sen huollettavat.
Lähtö
Alla oleva tulos ponnahtaa esiin hälytysruudun, joka näyttää div-elementin tekstisisällön:
Esimerkki 2: 'textContent'-ominaisuuden käyttäminen elementin tekstisisällön korvaamiseksi, mukaan lukien sen jälkeläiset
Tämä esimerkki näyttää, kuinka 'textContent'-ominaisuus korvaa kaikki elementin aliarvot muokattaessaan sen tekstiä.
HTML-koodi
< keskusta >
< h1 id = 'pääni' klikkaamalla = 'muokkaaText()' >< b > Tämä b > On < jänneväli > Otsikko < jänneväli > < i > Elementti i > h1 >
keskusta >Yllä mainituilla koodiriveillä:
- ' ' -tunniste lisää tason 1 otsikkoelementin, johon on liitetty ' klikkaamalla 'tapahtuma, joka kutsuu ' muokkaaText() ”-toiminto, kun käyttäjä napsauttaa sitä.
- Otsikkoelementti sisältää myös ' ', ' ”, ja ” ” merkitsee sen jälkeläisiksi. ' ' -tunnistetta käytetään lihavoitamaan mukana oleva merkkijono, '' -tunnistetta ilman tyyliominaisuutta käytetään antamaan mitään tyyliä annetulle merkkijonolle, ja ' ' -tunnistetta käytetään näyttämään määritetty merkkijono kursivoituna.
JavaScript-koodi
< käsikirjoitus >
missä h1 = asiakirja. getElementById ( 'pääni' ) ;
konsoli. Hirsi ( h1 ) ;
funktio modifyText ( ) {
h1. tekstisisältö = 'Tervetuloa Linuxhintiin!' ;
konsoli. Hirsi ( h1 )
}
käsikirjoitus >Yllä olevassa JavaScript-koodissa:
- 'h1'-muuttuja käyttää ' document.getElementById() ” -menetelmää päästäksesi otsikkoelementtiin sille määritetyn tunnuksen kautta.
- ' console.log() ” -menetelmä näyttää avatun otsikkoelementin konsolissa ennen sen sisällön muuttamista.
- Funktio nimeltä ' muokkaaText() ' käyttää ' tekstisisältö ” -ominaisuutta, jolla voit muokata haetun otsikkoelementin tekstiä.
- Viimeinen 'console.log()'-menetelmä näyttää uudelleen 'h1'-arvon muokkauksen jälkeen.
Lähtö
Konsoli näyttää selvästi, että kaikki tietyn otsikkoelementin alakohdat on korvattu uudella tekstillä, kun sitä napsautetaan:
Esimerkki 3: 'textContent'-ominaisuuden käyttäminen elementin lapsen tekstin muokkaamiseen
Tämä esimerkki käyttää 'textContent'-ominaisuutta tietyn elementin alatason tekstin muokkaamiseen.
HTML-koodi
< div id = 'myDiv' tyyli = 'reuna: 3px kiinteä musta;leveys: 400px; täyte: 5px 5px; margin: auto;' >
< keskusta >
< -painiketta id = 'btn' hiiren päällä = 'changeText()' > Vanha painike < / -painiketta >
< / keskusta >
< / div >Tässä skenaariossa:
- 'div'-elementissä on 'button'-elementti, joka luodaan ''
' -tunniste. - Painikeelementti sisältää lisäksi määritetyn tunnuksen ja ' hiiren päällä 'tapahtuma, joka kutsuu ' muutaTeksti() ”-toimintoa, kun hiiri liikkuu sen päällä.
JavaScript-koodi
< käsikirjoitus >
oli vanhempiElementti = asiakirja. getElementById ( 'myDiv' ) ;
var kohde = asiakirja. getElementById ( 'btn' ) ;
oli find_me = vanhempiElementti. sisältää ( kohde ) ;
jos ( vanhempiElementti. sisältää ( kohde ) == totta ) {
konsoli. Hirsi ( löydä minut ) ;
funktion muutosTeksti ( ) {
kohde. tekstisisältö = 'Uusi painike' ;
}
} muu {
konsoli. Hirsi ( 'Ei ole olemassa' )
}
käsikirjoitus >Yllä olevassa koodinpätkässä:
- 'parentElement'-muuttuja käyttää ' getElementById() ” -menetelmää päästäksesi päädiv-elementtiin. 'Target'-muuttuja käyttää myös 'getElementById()'-menetelmää noutaakseen lisätyn painikeelementin tunnuksellaan.
- 'find_me' -muuttuja käyttää ' sisältää() ” -menetelmää tarkistaaksesi, onko kohdistettu painikeelementti div:n ali vai ei. Tämä menetelmä palauttaa ' totta 'kyllä', muuten 'false'.
- ' tai muuten ”-lause määrittelee koodilohkon.
- Jos kohdeelementti on pääelementin ali, ' muutaTeksti() ' -toiminto muuttaa tekstiään ' tekstisisältö ” omaisuutta. Muussa tapauksessa 'else'-koodilohko suoritetaan näyttääkseen määritetyn viestin käyttämällä ' console.log() ”menetelmä.
Lähtö
Konsolissa näkyy ' totta ” Boolen arvo, joka varmistaa, että painikeelementti on annetun div:n lapsi ja sitten sen teksti muuttuu, kun hiirtä viedään sen päälle:
Ero textContent-, innerText- ja innerHTML-ominaisuuksien välillä?
Yleensä ' tekstisisältö ', ' sisäteksti ”, ja ” innerHTML ”-ominaisuudet käsittelevät elementin tai solmun tekstiä sen asettamisessa ja hankkimisessa. Nämä ominaisuudet eroavat kuitenkin toisistaan joidenkin tekijöiden perusteella. Tässä osiossa korostetaan tärkeimmät erot niiden kaikkien välillä:
Ehdot 'tekstisisältö' 'sisäteksti' 'innerHTML' Palautustyyppi Se palauttaa elementin tekstin, mukaan lukien kaikki sen alakohdat (muotoilutunnisteet), CSS-piilotekstin ja välilyönnin. Se ei palauta elementin HTML-tageja. Se palauttaa kohdistetun HTML-elementin tekstisisällön kaikkine alalajineen (muotoilutunnisteet). Se ei palauta välilyöntiä, piilotettua CSS-tekstiä ja HTML-tageja paitsi