Ez az útmutató bemutatja, hogyan lehet elérni és kezelni a HTML DOM elem „textContent” tulajdonságát JavaScriptben.
Először is vessen egy pillantást a HTML DOM „textContent” tulajdonságának alapjaira.
Mi az a HTML DOM „textContent” tulajdonság a JavaScriptben?
A ' textContent ” az a beépített tulajdonság, amely beállítja, lekéri és módosítja egy adott elem vagy csomópont szövegét, beleértve annak összes leszármazottját is. A leszármazottak gyermekelemek, például , , és még sok más, amelyeket formázási célokra használnak. Amikor a szöveget a „textContent” tulajdonsággal állítja be, a megcélzott elem leszármazottai teljesen lecserélődnek az új szövegre.
Szintaxis (Szövegtartalom beállítása)
Az alapvető szintaxis egy elem/csomópont szövegének beállításához a ' textContent ” tulajdonság alá van írva:
elem. textContent = szöveg | csomópont. textContent = szöveg
A fenti szintaxis a kívánt ' szöveg ” olyan értékként, amelyet a felhasználó egy elemhez vagy csomóponthoz szeretne beállítani.
Szintaxis (Szöveges tartalom lekérése)
Az általános szintaxis egy elem vagy csomópont szövegének visszaadásához a „ textContent ” tulajdonság itt van feltüntetve:
elem. textContent | csomópont. textContentVisszatérési érték: A ' textContent ' tulajdonság visszaadja a ' szöveg ” elem vagy csomópont szóközzel, de belső HTML-címkéi nélkül.
Most gyakorlatilag használja a fent meghatározott szintaxisokat a „textContent” tulajdonság eléréséhez és kezeléséhez.
Hogyan lehet elérni és kezelni a HTML DOM elem 'textContent' tulajdonságát JavaScriptben?
Az „innerHTML” és „innerText” tulajdonságokhoz hasonlóan a „ textContent ” tulajdonság azt is lehetővé teszi a felhasználók számára, hogy könnyen beállítsák, hozzáférjenek és módosítsák a kívánt elem szövegét. Ez a szakasz az alábbi példák segítségével végrehajtja az összes műveletet egy elemen.
1. példa: A „textContent” tulajdonság alkalmazása az elem/csomópont szöveg eléréséhez
Ez a példa a „textContent” tulajdonságot alkalmazza egy adott elem vagy csomópont szövegének visszaadására, beleértve az összes gyermekét.
HTML kód
< div id = 'myDiv' az egér felett = 'getText()' stílus = 'szegély: 3 képpont tömör fekete; szélesség: 400 képpont; kitöltés: 5 képpont 5 képpont; margó: automatikus;' >< h1 > Első címsor < / h1 >
< h2 > Második címsor < / h2 >
< h3 > Harmadik címsor < / h3 >
< h4 > Negyedik címsor < / h4 >
< h5 > Ötödik címsor < / h5 >
< h6 > Hatodik címsor < / h6 >
< / div >
A HTML kód fenti soraiban:
- A ' ” címke, amelynek azonosítója „myDiv”, egy div elemet hoz létre, amelynek stílusa a következő tulajdonságokkal rendelkezik: border, width, padding (felső és alsó, bal és jobb) és margó. Ezenkívül csatolja a „ az egér felett ' esemény, amely meghívja a ' getText() ” funkciót, amikor a felhasználó fölé viszi az egeret.
- A div belsejében az összes megadott címsor (h1, h2, h3, h4, h5 és h6) beilleszti a címsorelemeket a megadott szintjeik szerint.
JavaScript kód
< forgatókönyv >
függvény getText ( ) {
volt elem = dokumentum. getElementById ( 'myDiv' ) ;
éber ( elem. textContent ) ;
}
forgatókönyv >A fent írt JavaScript kódblokkban:
- Határozzon meg egy '' nevű függvényt getText() ”.
- Ezen a függvényen belül az „elem” változó a „ getElementById() ” metódussal érheti el a div elemet az azonosítóján keresztül.
- A ' éber() ” metódus létrehoz egy figyelmeztető mezőt, amely a „ textContent ” tulajdonság visszaadja a szülő div szövegét az összes hozzátartozójával együtt.
Kimenet
Az alábbi kimeneten megjelenik egy figyelmeztető mező, amely a div elem szöveges tartalmát mutatja:
2. példa: A „textContent” tulajdonság alkalmazása egy elem szövegtartalmának lecserélésére, beleértve annak leszármazottait
Ez a példa bemutatja, hogy a „textContent” tulajdonság hogyan cseréli le egy elem összes gyermekét, miközben módosítja annak szövegét.
HTML kód
< központ >
< h1 id = 'fejem' kattintásra = 'módosít szöveg()' >< b > Ez b > van < span > Cím < span > < én > Elem én > h1 >
központ >A fenti kódsorokban:
- A ' ' címke egy 1. szintű címsorelemet ad hozzá egy csatolt ' kattintásra ' esemény, amely meghívja a ' modifyText() ” funkciót, amikor a felhasználó rákattint.
- A címsor elem tartalmazza a „ ', ' ”, és „ ” címke, mint leszármazottai. A „ ” címke a mellékelt karakterlánc vastagítására szolgál, a „” címke stílustulajdonság nélkül arra szolgál, hogy ne alkalmazzon stílust az adott karakterláncon, az „ ” címke pedig a megadott karakterlánc dőlt betűs.
JavaScript kód
< forgatókönyv >
ahol h1 = dokumentum. getElementById ( 'fejem' ) ;
konzol. log ( h1 ) ;
függvény modifyText ( ) {
h1. textContent = 'Üdvözöljük a Linuxhintben!' ;
konzol. log ( h1 )
}
forgatókönyv >A fenti JavaScript kódban:
- A „h1” változó a „ document.getElementById() ” metódussal érheti el a címsorelemet a hozzárendelt azonosítón keresztül.
- A ' console.log() ” metódus megjeleníti az elért címsorelemet a konzolon, mielőtt megváltoztatná annak tartalmát.
- A „ modifyText() ' használja a ' textContent ” tulajdonság a letöltött címsor elem szövegének módosításához.
- Az utolsó „console.log()” metódus a módosítás után ismét megjeleníti a „h1” értéket.
Kimenet
A konzolon jól látható, hogy az adott címsorelem összes utódja az újonnan megadott szövegre lett cserélve, ha rákattintunk:
3. példa: A „textContent” tulajdonság alkalmazása az elem gyermek szövegének módosítására
Ez a példa a „textContent” tulajdonságot használja az adott elem gyermekének szövegének módosítására.
HTML kód
< div id = 'myDiv' stílus = 'szegély: 3 képpont tömör fekete; szélesség: 400 képpont; kitöltés: 5 képpont 5 képpont; margó: automatikus;' >
< központ >
< gomb id = 'btn' az egér felett = 'changeText()' > Régi gomb < / gomb >
< / központ >
< / div >Ebben a forgatókönyvben:
- A „div” elemnek van egy „button” eleme, amely a „
” címke. - A gombelem tartalmaz továbbá egy hozzárendelt azonosítót és egy „ az egér felett ' esemény, amely a ' changeText() ” funkciót, amikor az egeret fölé viszi.
JavaScript kód
< forgatókönyv >
szülőElement volt = dokumentum. getElementById ( 'myDiv' ) ;
var cél = dokumentum. getElementById ( 'btn' ) ;
a find_me volt = szülőElement. tartalmaz ( cél ) ;
ha ( szülőElement. tartalmaz ( cél ) == igaz ) {
konzol. log ( találj meg ) ;
függvény változásSzöveg ( ) {
cél. textContent = 'Új gomb' ;
}
} más {
konzol. log ( 'Nem létezik' )
}
forgatókönyv >A fenti kódrészletben:
- A „parentElement” változó a „ getElementById() ” metódussal érheti el a szülő div elemet. A „target” változó a „getElementById()” metódust is használja a hozzáadott gombelem lekéréséhez az azonosítójával.
- A „find_me” változó a „ tartalmazza () ” módszerrel ellenőrizheti, hogy a megcélzott gombelem a div gyermeke-e vagy sem. Ez a módszer visszaadja a ' igaz ” az „igen”-re, ellenkező esetben „hamis”.
- A ' ha más ” utasítás kódblokkot határoz meg.
- Ha a megcélzott elem a szülő elem gyermeke, akkor a „ changeText() ' funkció megváltoztatja a szövegét a ' textContent ' ingatlan. Ellenkező esetben az „else” kódblokk lefut, hogy megjelenítse a megadott üzenetet a „ console.log() ” módszerrel.
Kimenet
A konzolon egy „ igaz ” logikai érték, amely ellenőrzi, hogy a gombelem az adott div gyermeke, majd a szövege megváltozik, ha fölé viszi az egeret:
Mi a különbség a textContent, az innerText és az innerHTML tulajdonságok között?
Általában a „ textContent ', ' innerText ”, és „ innerHTML ” tulajdonságok egy elem vagy csomópont szövegével foglalkoznak a beállítás és a beszerzés módjában. Ezek a tulajdonságok azonban bizonyos tényezők miatt eltérnek egymástól. Ez a rész kiemeli a főbb különbségeket mindegyik között:
Feltételek 'textContent' 'belső szöveg' 'innerHTML' Visszatérés típusa Egy elem szövegét adja vissza, beleértve az összes gyermeket (formázási címkéket), a rejtett CSS-szöveget és a szóközt. Nem adja vissza egy elem HTML-címkéit. Visszaadja a megcélzott HTML-elem szöveges tartalmát az összes gyermekével (formázó címkékkel). Nem ad vissza szóközt, rejtett CSS-szöveget és HTML-címkéket, kivéve a