Táto príručka bude ilustrovať, ako pristupovať a manipulovať s vlastnosťou „textContent“ prvku HTML DOM v jazyku JavaScript.
Najprv sa pozrime na základy vlastnosti HTML DOM „textContent“.
Čo je vlastnosť HTML DOM „textContent“ v JavaScripte?
' textObsah ” je vstavaná vlastnosť, ktorá nastavuje, získava a upravuje text zadaného prvku alebo uzla vrátane všetkých jeho potomkov. Potomkovia sú podradené prvky, ako sú , , a mnohé ďalšie, ktoré sa používajú na účely formátovania. Pri nastavovaní textu pomocou vlastnosti „textContent“ sa potomkovia cieľového prvku úplne nahradia novým textom.
Syntax (Nastaviť textový obsah)
Základná syntax na nastavenie textu prvku/uzla pomocou „ textObsah “vlastnosť je napísaná nižšie:
element. textObsah = text | uzol. textObsah = text
Vyššie uvedená syntax má požadovaný „ text ” ako hodnotu, ktorú chce používateľ nastaviť pre prvok alebo uzol.
Syntax (Získať textový obsah)
Zovšeobecnená syntax na vrátenie textu prvku alebo uzla prostredníctvom „ textObsah “ nehnuteľnosť je uvedená tu:
element. textObsah | uzol. textObsahNávratová hodnota: ' textObsah „vlastnosť vráti „ text ” prvku alebo uzla s medzerami, ale bez jeho vnútorných značiek HTML.
Teraz použite vyššie definované syntaxe prakticky na prístup a manipuláciu s vlastnosťou „textContent“.
Ako získať prístup a manipulovať s vlastnosťou „textContent“ prvku HTML DOM v JavaScripte?
Podobne ako vlastnosti „innerHTML“ a „innerText“, textObsah ” tiež umožňuje používateľom jednoducho nastaviť, pristupovať a upravovať text požadovaného prvku. Táto časť vykonáva všetky tieto operácie s prvkom pomocou nižšie uvedených príkladov.
Príklad 1: Použitie vlastnosti „textContent“ na prístup k textu prvku/uzla
Tento príklad použije vlastnosť „textContent“ na vrátenie textu konkrétneho prvku alebo uzla vrátane všetkých jeho potomkov.
HTML kód
< div id = 'myDiv' onmouseover = 'getText()' štýl = 'okraj: 3 pixely plná čierna; šírka: 400 pixelov; výplň: 5 pixelov 5 pixelov; okraj: auto;' >< h1 > Prvý nadpis < / h1 >
< h2 > Druhý nadpis < / h2 >
< h3 > Tretí nadpis < / h3 >
< h4 > Štvrtý nadpis < / h4 >
< h5 > Piaty nadpis < / h5 >
< h6 > Šiesty nadpis < / h6 >
< / div >
Vo vyššie uvedených riadkoch kódu HTML:
- ' Značka ” s id „myDiv“ vytvára prvok div, ktorý má štýl s nasledujúcimi vlastnosťami: border, width, padding (hore a bottom, left a right) a margin. Pripája tiež „ onmouseover ” udalosť, ktorá vyvoláva “ getText() ” funkciu, keď na ňu používateľ podrží kurzor myši.
- Vo vnútri prvku div všetky uvedené značky nadpisu (h1, h2, h3, h4, h5 a h6) vkladajú prvky nadpisu podľa ich určených úrovní.
JavaScript kód
< skript >
funkcia getText ( ) {
bol elem = dokument. getElementById ( 'myDiv' ) ;
upozorniť ( element. textObsah ) ;
}
skript >Vo vyššie napísanom bloku kódu JavaScript:
- Definujte funkciu s názvom „ getText() “.
- Vo vnútri tejto funkcie premenná „elem“ aplikuje „ getElementById() ” na prístup k prvku div prostredníctvom jeho id.
- ' upozornenie() “ vytvára výstražné pole, ktoré používa „ textObsah vlastnosť ” vrátiť text nadradeného prvku div spolu so všetkými jeho závislými prvkami.
Výkon
Nasledujúci výstup zobrazí výstražné pole zobrazujúce textový obsah prvku div:
Príklad 2: Použitie vlastnosti „textContent“ na nahradenie textového obsahu prvku vrátane jeho potomkov
Tento príklad ukazuje, ako vlastnosť „textContent“ nahrádza všetky potomky prvku pri úprave jeho textu.
HTML kód
< stred >
< h1 id = 'moja hlava' po kliknutí = 'modifyText()' < b > Toto b > je < rozpätie > Smerovanie < rozpätie > < i > Element i > h1 >
stred >Vo vyššie uvedených riadkoch kódu:
- ' “ tag pridáva prvok nadpisu úrovne 1 s pripojeným “ po kliknutí ” udalosť, ktorá vyvoláva “ upraviťText() “, keď naň používateľ klikne.
- Prvok nadpisu obsahuje aj „ ',' “ a „ ” označuje ako svojich potomkov. Značka „ “ sa používa na tučné písmo v uzavretom reťazci, značka „“ bez akejkoľvek vlastnosti štýlu sa používa na použitie bez štýlu na daný reťazec a značka „ “ sa používa na zobrazenie zadaný reťazec ako kurzíva.
JavaScript kód
< skript >
kde h1 = dokument. getElementById ( 'moja hlava' ) ;
konzola. log ( h1 ) ;
funkcia upraviťText ( ) {
h1. textObsah = 'Vitajte v Linuxhint!' ;
konzola. log ( h1 )
}
skript >Vo vyššie uvedenom kóde JavaScript:
- Premenná „h1“ používa „ document.getElementById() ” na prístup k prvku nadpisu prostredníctvom jeho priradeného id.
- ' console.log() ” zobrazí prístupový prvok nadpisu na konzole pred zmenou jeho obsahu.
- Funkcia s názvom „ upraviťText() “ používa „ textObsah ” na úpravu textu načítaného prvku nadpisu.
- Posledná metóda „console.log()“ po úprave opäť zobrazuje hodnotu „h1“.
Výkon
Konzola jasne ukazuje, že všetky potomky daného prvku nadpisu boli po kliknutí nahradené novo špecifikovaným textom:
Príklad 3: Použitie vlastnosti „textContent“ na úpravu textu potomka prvku
Tento príklad používa vlastnosť „textContent“ na úpravu textu potomka konkrétneho prvku.
HTML kód
< div id = 'myDiv' štýl = 'okraj: 3 pixely plná čierna; šírka: 400 pixelov; výplň: 5 pixelov 5 pixelov; okraj: auto;' >
< stred >
< tlačidlo id = 'btn' onmouseover = 'changeText()' > Staré tlačidlo < / tlačidlo >
< / stred >
< / div >V tomto scenári:
- Prvok „div“ má prvok „tlačidlo“, ktorý je vytvorený pomocou „
” tag. - Element tlačidla ďalej obsahuje priradené ID a „ onmouseover udalosť, ktorá volá „ zmeniťText() ” funkciu, keď na ňu prejdete myšou.
JavaScript kód
< skript >
bol parentElement = dokument. getElementById ( 'myDiv' ) ;
var cieľ = dokument. getElementById ( 'btn' ) ;
bol find_me = parentElement. obsahuje ( cieľ ) ;
ak ( parentElement. obsahuje ( cieľ ) == pravda ) {
konzola. log ( Nájdi ma ) ;
zmena funkcieText ( ) {
cieľ. textObsah = 'Nové tlačidlo' ;
}
} inak {
konzola. log ( 'Neexistuje' )
}
skript >Vo vyššie uvedenom útržku kódu:
- Premenná „parentElement“ aplikuje „ getElementById() ” na prístup k rodičovskému prvku div. Premenná „target“ tiež využíva metódu „getElementById()“ na načítanie pridaného prvku tlačidla pomocou jeho id.
- Premenná „find_me“ používa „ obsahuje() ” metóda na kontrolu, či je cieľový prvok tlačidla potomkom prvku div alebo nie. Táto metóda vráti „ pravda “ pre „áno“ inak „nepravda“.
- ' ak-inak ” definuje blok kódu.
- Ak je cieľový prvok potomkom nadradeného prvku, potom „ zmeniťText() ” funkcia zmení svoj text cez “ textObsah ' nehnuteľnosť. V opačnom prípade sa spustí blok kódu „else“, aby sa zobrazila špecifikovaná správa pomocou „ console.log() “.
Výkon
Na konzole sa zobrazuje „ pravda ” boolovská hodnota, ktorá overuje, že prvok tlačidla je potomkom daného prvku div a jeho text sa potom zmení po umiestnení kurzora myši naň:
Rozdiel medzi vlastnosťami textContent, innerText a innerHTML?
Vo všeobecnosti platí, že „ textObsah ',' vnútornýText “ a „ innerHTML vlastnosti sa zaoberajú textom prvku alebo uzla spôsobom jeho nastavenia a získania. Tieto vlastnosti sa však navzájom líšia na základe niektorých faktorov. Táto časť zdôrazňuje hlavné rozdiely medzi nimi:
Podmienky 'textContent' 'vnútornýText' 'vnútorný HTML' Typ návratu Vráti text prvku vrátane všetkých jeho potomkov (formátovacích značiek), skrytého textu CSS a medzery. Nevracia značky HTML prvku. Vráti textový obsah zacieleného prvku HTML so všetkými jeho potomkami (formátovacími značkami). Nevracia medzeru, skrytý text CSS a značky HTML okrem