Šis vadovas parodys, kaip pasiekti ir valdyti HTML DOM elemento „textContent“ ypatybę „JavaScript“.
Pirmiausia pažvelkite į HTML DOM „textContent“ nuosavybės pagrindus.
Kas yra „JavaScript“ HTML DOM „textContent“ ypatybė?
„ teksto Turinys “ yra integruota ypatybė, kuri nustato, nuskaito ir modifikuoja nurodyto elemento ar mazgo, įskaitant visus jo palikuonis, tekstą. Palikuonys yra antriniai elementai, tokie kaip , , ir daug daugiau, kurie naudojami formatavimo tikslais. Nustatant tekstą naudojant ypatybę „textContent“, tikslinio elemento palikuonys visiškai pakeičiami nauju tekstu.
Sintaksė (nustatyti teksto turinį)
Pagrindinė sintaksė, skirta nustatyti elemento / mazgo tekstą naudojant „ teksto Turinys “ nuosavybė parašyta žemiau:
elementas. teksto Turinys = tekstą | mazgas. teksto Turinys = tekstą
Aukščiau pateikta sintaksė paima norimą ' tekstą “ kaip reikšmę, kurią vartotojas nori nustatyti elementui arba mazgui.
Sintaksė (Gauti teksto turinį)
Apibendrinta sintaksė, grąžinanti elemento ar mazgo tekstą per „ teksto Turinys “ nuosavybė nurodyta čia:
elementas. teksto Turinys | mazgas. teksto TurinysGrąžinimo vertė: „ teksto Turinys “ nuosavybė grąžina “ tekstą “ elemento ar mazgo su tarpais, bet be vidinių HTML žymų.
Dabar praktiškai naudokite aukščiau apibrėžtas sintakses, kad pasiektumėte ir valdytumėte ypatybę „textContent“.
Kaip pasiekti ir manipuliuoti HTML DOM elemento „textContent“ nuosavybe „JavaScript“?
Panašiai kaip „innerHTML“ ir „innerText“ ypatybės, „ teksto Turinys “ ypatybė taip pat leidžia vartotojams lengvai nustatyti, pasiekti ir modifikuoti norimo elemento tekstą. Šiame skyriuje visos šios operacijos su elementu atliekamos naudojant toliau pateiktus pavyzdžius.
1 pavyzdys: ypatybės „textContent“ taikymas norint pasiekti elemento / mazgo tekstą
Šiame pavyzdyje taikoma ypatybė „textContent“, kad būtų grąžintas konkretaus elemento ar mazgo tekstas, įskaitant visus jo antrinius elementus.
HTML kodas
< div id = 'myDiv' užveskite pelės žymeklį = 'getText()' stilius = 'kraštinė: 3 piks. juoda; plotis: 400 piks.; užpildas: 5 piks. 5 piks.; paraštė: automatinis;' >< h1 > Pirma antraštė < / h1 >
< h2 > Antroji antraštė < / h2 >
< h3 > Trečia antraštė < / h3 >
< h4 > Ketvirta antraštė < / h4 >
< h5 > Penktoji antraštė < / h5 >
< h6 > Šeštoji antraštė < / h6 >
< / div >
Aukščiau pateiktose HTML kodo eilutėse:
- „ “ žyma, turinti ID „myDiv“, sukuria „div“ elementą, kuriam būdingos šios savybės: kraštinė, plotis, užpildymas (viršuje ir apačioje, kairėje ir dešinėje) ir paraštes. Prie jo taip pat pridedama „ užveskite pelės žymeklį “ įvykis, kuris iššaukia “ getText () “ funkcija, kai vartotojas užveda pelės žymeklį virš jo.
- Div viduje visos nurodytos antraštės (h1, h2, h3, h4, h5 ir h6) įterpia antraštės elementus pagal jų nurodytus lygius.
JavaScript kodas
< scenarijus >
funkcija getText ( ) {
buvo elem = dokumentas. getElementById ( 'myDiv' ) ;
budrus ( elementas. teksto Turinys ) ;
}
scenarijus >Aukščiau parašytame JavaScript kodo bloke:
- Apibrėžkite funkciją pavadinimu ' getText () “.
- Šios funkcijos viduje kintamasis „elem“ taiko „ getElementById() “ metodas pasiekti div elementą per jo ID.
- „ budrus() “ metodas sukuria įspėjimo laukelį, kuriame naudojamas teksto Turinys ” savybę grąžinti pirminio div tekstą kartu su visais jo išlaikytiniais.
Išvestis
Toliau pateiktame išvestyje pasirodo įspėjimo laukelis, kuriame rodomas div elemento tekstinis turinys:
2 pavyzdys: ypatybės „textContent“ taikymas norint pakeisti elemento teksto turinį, įskaitant jo palikuonis
Šiame pavyzdyje parodyta, kaip ypatybė „textContent“ pakeičia visus elemento antrinius elementus, kai keičiamas jo tekstas.
HTML kodas
< centras >
< h1 id = 'Mano galva' paspaudus = 'modifyText()' >< b > Tai b > yra < tarpas > Antraštė < tarpas > < i > Elementas i > h1 >
centras >Aukščiau nurodytose kodo eilutėse:
- „ ' žyma prideda 1 lygio antraštės elementą su pridedamu ' paspaudus “ įvykis, kuris iššaukia “ modifikuotiText() “ funkciją, kai vartotojas ją spusteli.
- Antraštės elemente taip pat yra „ ', ' “ ir „ “ žymi kaip jos palikuonis. Žyma „ “ naudojama įtrauktai eilutei paryškinti, žyma „“ be jokios stiliaus ypatybės naudojama tam, kad nurodytai eilutei nebūtų stiliaus, o žyma „ “ naudojama pateikti nurodyta eilutė kaip kursyvas.
JavaScript kodas
< scenarijus >
kur h1 = dokumentas. getElementById ( 'Mano galva' ) ;
konsolė. žurnalas ( h1 ) ;
funkcija modifikuotiText ( ) {
h1. teksto Turinys = 'Sveiki atvykę į Linuxhint!' ;
konsolė. žurnalas ( h1 )
}
scenarijus >Aukščiau pateiktame JavaScript kode:
- „h1“ kintamasis naudoja „ document.getElementById() “ metodą, kad pasiektumėte antraštės elementą per jam priskirtą ID.
- „ console.log() “ metodas rodo pasiekiamą antraštės elementą konsolėje prieš keičiant jo turinį.
- Funkcija pavadinimu „ modifikuotiText() “ naudoja „ teksto Turinys ” ypatybę, norėdami pakeisti gauto antraštės elemento tekstą.
- Paskutinis 'console.log()' metodas po pakeitimo vėl rodo 'h1' reikšmę.
Išvestis
Konsolė aiškiai rodo, kad visi nurodyto antraštės elemento vaikai buvo pakeisti naujai nurodytu tekstu, jį spustelėjus:
3 pavyzdys: ypatybės „textContent“ taikymas norint pakeisti elemento vaiko tekstą
Šiame pavyzdyje naudojama ypatybė „textContent“, kad būtų pakeistas konkretaus elemento antrinis tekstas.
HTML kodas
< div id = 'myDiv' stilius = 'kraštinė: 3 piks. juoda; plotis: 400 piks.; užpildas: 5 piks. 5 piks.; paraštė: automatinis;' >
< centras >
< mygtuką id = 'btn' užveskite pelės žymeklį = 'pakeistiText()' > Senas mygtukas < / mygtuką >
< / centras >
< / div >Pagal šį scenarijų:
- Elementas „div“ turi „mygtuko“ elementą, kuris sukuriamas naudojant „
“ žymą. - Be to, mygtuko elemente yra priskirtas ID ir „ užveskite pelės žymeklį “ įvykis, vadinamas “ ChangeText() “ funkcija, kai pelė užves virš jos.
JavaScript kodas
< scenarijus >
buvo tėvasElementas = dokumentas. getElementById ( 'myDiv' ) ;
var taikinys = dokumentas. getElementById ( 'btn' ) ;
buvo rasti_me = tėvoElementas. yra ( taikinys ) ;
jeigu ( tėvoElementas. yra ( taikinys ) == tiesa ) {
konsolė. žurnalas ( Surask mane ) ;
funkcijos pakeitimasTekstas ( ) {
taikinys. teksto Turinys = 'Naujas mygtukas' ;
}
} Kitas {
konsolė. žurnalas ( 'Neegzistuoja' )
}
scenarijus >Aukščiau pateiktame kodo fragmente:
- Kintamasis „parentElement“ taiko „ getElementById() “ metodą, kad pasiektumėte pirminį div elementą. Kintamasis „target“ taip pat naudoja metodą „getElementById()“, kad gautų pridėtą mygtuko elementą naudojant jo ID.
- Kintamasis „find_me“ naudoja „ yra () “ metodą, kad patikrintumėte, ar tikslinis mygtuko elementas yra div antrinis elementas, ar ne. Šis metodas grąžins ' tiesa “ reiškia „taip“, kitaip „klaidinga“.
- „ jei-kitaip “ teiginys apibrėžia kodo bloką.
- Jei tikslinis elementas yra pirminio elemento antrinis, tada „ ChangeText() ' funkcija pakeis savo tekstą per ' teksto Turinys ' nuosavybė. Priešingu atveju bus vykdomas kodo blokas „else“, kad būtų rodomas nurodytas pranešimas naudojant „ console.log() “ metodas.
Išvestis
Konsolė rodo „ tiesa ” loginė reikšmė, patvirtinanti mygtuko elementą, yra nurodyto div antrinis elementas, o tada jo tekstas pasikeičia užvedus pelės žymeklį virš jo:
Skirtumas tarp „textContent“, „innerText“ ir „innerHTML“ ypatybių?
Paprastai „ teksto Turinys ', ' vidinisTekstas “ ir „ vidinis HTML “ ypatybės yra susijusios su elemento ar mazgo tekstu, kaip jį nustatyti ir gauti. Tačiau šios savybės skiriasi viena nuo kitos dėl kai kurių veiksnių. Šiame skyriuje pabrėžiami pagrindiniai skirtumai tarp jų:
Sąlygos 'teksto turinys' 'vidinis tekstas' 'innerHTML' Grąžinimo tipas Jis grąžina elemento tekstą, įskaitant visus jo antrinius elementus (formatavimo žymas), paslėptą CSS tekstą ir tarpą. Tai negrąžina elemento HTML žymų. Jis grąžina tikslinio HTML elemento tekstinį turinį su visais antriniais elementais (formatavimo žymomis). Jis nepateikia tarpo, paslėpto CSS teksto ir HTML žymų, išskyrus