See juhend illustreerib, kuidas pääseda juurde ja manipuleerida JavaScriptis HTML DOM-i elemendi 'textContent' atribuuti.
Esiteks vaadake HTML DOM-i atribuudi 'textContent' põhitõdesid.
Mis on JavaScripti HTML DOM-i 'textContent' atribuut?
' tekstSisu ” on sisseehitatud atribuut, mis määrab, hangib ja muudab määratud elemendi või sõlme teksti, sealhulgas kõiki selle järglasi. Järeltulijad on alamelemendid, nagu , , ja palju muud, mida kasutatakse vormindamiseks. Kui seadistate teksti atribuudi 'textContent' abil, asendatakse sihitud elemendi järeltulijad täielikult uue tekstiga.
Süntaks (teksti sisu määramine)
Põhisüntaks elemendi/sõlme teksti määramiseks kasutades ' tekstSisu ” atribuut on kirjutatud allpool:
element. tekstSisu = tekst | sõlm. tekstSisu = tekst
Ülaltoodud süntaks võtab soovitud ' tekst ” väärtusena, mille kasutaja soovib elemendile või sõlmele määrata.
Süntaks (Hangi tekstisisu)
Üldine süntaks elemendi või sõlme teksti tagastamiseks ' tekstSisu ” vara on märgitud siin:
element. tekstSisu | sõlm. tekstSisuTagastusväärtus: ' tekstSisu ' vara tagastab ' tekst ” elemendi või sõlme vahedega, kuid ilma sisemiste HTML-märgenditeta.
Nüüd kasutage ülaltoodud süntaksi praktiliselt, et pääseda juurde atribuudile 'textContent' ja sellega manipuleerida.
Kuidas pääseda juurde ja manipuleerida JavaScriptis HTML DOM-i elemendi 'textContent' atribuuti?
Sarnaselt 'innerHTML' ja 'innerText' atribuutidele on ' tekstSisu ” atribuut võimaldab kasutajatel ka soovitud elemendi teksti hõlpsalt määrata, sellele juurde pääseda ja seda muuta. Selles jaotises teostatakse kõik need toimingud elemendiga, kasutades alltoodud näiteid.
Näide 1: atribuudi „textContent” rakendamine elemendi/sõlme tekstile juurdepääsuks
See näide rakendab atribuuti 'textContent', et tagastada konkreetse elemendi või sõlme teksti koos kõigi selle alamosadega.
HTML-kood
< div id = 'myDiv' hiirega üle = 'getText()' stiilis = 'ääris: 3px täismust;laius: 400px; polster: 5px 5px; veeris: automaatne;' >< h1 > Esimene pealkiri < / h1 >
< h2 > Teine pealkiri < / h2 >
< h3 > Kolmas pealkiri < / h3 >
< h4 > Neljas pealkiri < / h4 >
< h5 > Viies pealkiri < / h5 >
< h6 > Kuues pealkiri < / h6 >
< / div >
Ülaltoodud HTML-koodi ridadel:
- ' ” silt, millel on ID „myDiv”, loob div elemendi, mis on kujundatud järgmiste omadustega ääris, laius, polster (ülemine ja alumine, vasak ja parem) ja veeris. Sellele on lisatud ka ' hiirega üle sündmus, mis kutsub esile getText() ” funktsioon, kui kasutaja viib hiire selle kohale.
- Div sees sisestavad kõik määratud pealkirja (h1, h2, h3, h4, h5 ja h6) sildid pealkirja elemendid vastavalt nende määratud tasemele.
JavaScripti kood
< stsenaarium >
funktsioon getText ( ) {
oli elem = dokument. getElementById ( 'myDiv' ) ;
hoiatus ( element. tekstSisu ) ;
}
stsenaarium >Eespool kirjutatud JavaScripti koodiplokis:
- Määrake funktsioon nimega ' getText() ”.
- Selle funktsiooni sees rakendab muutuja element ' getElementById() ” meetod Div-elemendile juurdepääsuks selle ID kaudu.
- ' hoiatus () ” meetod loob hoiatuskasti, mis kasutab tekstSisu ” atribuut, et tagastada vanema div tekst koos kõigi selle ülalpeetavatega.
Väljund
Allolev väljund kuvab hoiatuskasti, mis näitab div-elemendi tekstisisu:
Näide 2: atribuudi „textContent” rakendamine elemendi tekstisisu, sealhulgas selle järeltulijate asendamiseks
See näide näitab, kuidas atribuut „textContent” asendab kõik elemendi alamastmed, muutes selle teksti.
HTML-kood
< Keskus >
< h1 id = 'minu pea' onclick = 'muudaText()' >< b > See b > on < ulatus > Pealkiri < ulatus > < i > Element i > h1 >
Keskus >Eespool nimetatud koodiridades:
- ' märgend lisab 1. taseme pealkirjaelemendi koos lisatud ' onclick sündmus, mis kutsub esile muudaText() ” funktsiooni, kui kasutaja sellel klõpsab.
- Pealkirja element sisaldab ka ' ', ' ”, ja „ ” märgib selle järglastena. Märgendit „ ” kasutatakse suletud stringi paksuks kirjutamiseks, märgendit „” ilma stiiliomadusteta kasutatakse antud stringi stiili puudumiseks ja märgendit „ ” kasutatakse stringi kuvamiseks. määratud string kaldkirjas.
JavaScripti kood
< stsenaarium >
kus h1 = dokument. getElementById ( 'minu pea' ) ;
konsool. logi ( h1 ) ;
funktsioon modifyText ( ) {
h1. tekstSisu = 'Tere tulemast Linuxhinti!' ;
konsool. logi ( h1 )
}
stsenaarium >Ülaltoodud JavaScripti koodis:
- Muutuja 'h1' kasutab ' document.getElementById() ” meetod, et pääseda juurde pealkirja elemendile selle määratud ID kaudu.
- ' console.log() ” meetod kuvab enne selle sisu muutmist konsoolil avatud pealkirja elemendi.
- Funktsioon nimega ' muudaText() ' kasutab ' tekstSisu ” atribuut, et muuta toodud pealkirjaelemendi teksti.
- Viimane meetod 'console.log()' kuvab pärast muutmist uuesti 'h1' väärtuse.
Väljund
Konsool näitab selgelt, et kõik antud pealkirja elemendi alamjooned on sellel klõpsamisel asendatud äsja määratud tekstiga:
Näide 3: atribuudi „textContent” rakendamine elemendi lapse teksti muutmiseks
See näide kasutab atribuuti 'textContent', et muuta konkreetse elemendi alamteksti.
HTML-kood
< div id = 'myDiv' stiilis = 'ääris: 3px täismust;laius: 400px; polster: 5px 5px; veeris: automaatne;' >
< Keskus >
< nuppu id = 'btn' hiirega üle = 'muudaTeksti()' > Vana nupp < / nuppu >
< / Keskus >
< / div >Selle stsenaariumi korral:
- Elemendil 'div' on element 'nupp', mis luuakse '
” silti. - Nupuelement sisaldab lisaks määratud ID-d ja ' hiirega üle sündmus, mis kutsub üles muudaText() ” funktsiooni, kui hiir hõljub selle kohal.
JavaScripti kood
< stsenaarium >
oli vanemElement = dokument. getElementById ( 'myDiv' ) ;
var sihtmärk = dokument. getElementById ( 'btn' ) ;
oli leia_mind = vanemElement. sisaldab ( sihtmärk ) ;
kui ( vanemElement. sisaldab ( sihtmärk ) == tõsi ) {
konsool. logi ( leia_mind ) ;
funktsiooni muutmineTekst ( ) {
sihtmärk. tekstSisu = 'Uus nupp' ;
}
} muidu {
konsool. logi ( 'Ei eksisteeri' )
}
stsenaarium >Ülaltoodud koodilõigul:
- Muutuja 'parentElement' rakendab ' getElementById() ” meetod, et pääseda juurde div emaelemendile. Muutuja 'target' kasutab lisatud nupu elemendi toomiseks selle ID abil ka meetodit 'getElementById()'.
- Muutuja 'find_me' kasutab ' sisaldab() ” meetod, et kontrollida, kas sihitud nupuelement on div alamelement või mitte. See meetod tagastab ' tõsi 'jah' jaoks, muidu 'vale'.
- ' kui-muidu ” lause määratleb koodiploki.
- Kui sihitud element on emaelemendi alamelement, siis muudaText() funktsioon muudab oma teksti läbi ' tekstSisu ” vara. Vastasel juhul käivitatakse koodiplokk 'muu', et kuvada määratud teade, kasutades ' console.log() ” meetod.
Väljund
Konsool näitab ' tõsi ” Boolean väärtus, mis kinnitab, et nupuelement on antud div alam ja seejärel muutub selle tekst hiirekursori selle kohal hõljutamisel:
Erinevus textContent, innerText ja innerHTML atribuutide vahel?
Üldiselt on ' tekstSisu ', ' sisemine Tekst ”, ja „ sisemine HTML ” atribuudid käsitlevad elemendi või sõlme teksti selle seadmise ja hankimise viisil. Kuid need omadused erinevad üksteisest teatud tegurite tõttu. See jaotis toob esile peamised erinevused nende kõigi vahel:
Tingimused 'tekstisisu' 'sisetekst' 'innerHTML' Tagastamise tüüp See tagastab elemendi teksti, sealhulgas kõik selle alamelemendid (vormingusildid), CSS-i peidetud teksti ja tühiku. See ei tagasta elemendi HTML-märgendeid. See tagastab sihitud HTML-i elemendi tekstisisu koos kõigi selle alamosadega (vormindamissildid). See ei tagasta tühikut, CSS-i peidetud teksti ega HTML-märgendeid, välja arvatud