Ta vodnik bo prikazal, kako dostopati in manipulirati z lastnostjo »textContent« elementa HTML DOM v JavaScriptu.
Najprej si oglejte osnove lastnosti »textContent« HTML DOM.
Kaj je lastnost HTML DOM »textContent« v JavaScriptu?
' textContent ” je vgrajena lastnost, ki nastavi, pridobi in spremeni besedilo podanega elementa ali vozlišča, vključno z vsemi njegovimi potomci. Potomci so podrejeni elementi, kot so , , in še veliko več, ki se uporabljajo za namene oblikovanja. Med nastavljanjem besedila z lastnostjo »textContent« se potomci ciljnega elementa popolnoma nadomestijo z novim besedilom.
Sintaksa (nastavi besedilno vsebino)
Osnovna sintaksa za nastavitev besedila elementa/vozlišča z uporabo ' textContent ” Lastnost je zapisana spodaj:
element. textContent = besedilo | vozlišče. textContent = besedilo
Zgornja sintaksa sprejme želeno ' besedilo ” kot vrednost, ki jo želi uporabnik nastaviti za element ali vozlišče.
Sintaksa (pridobi besedilno vsebino)
Splošna sintaksa za vrnitev besedila elementa ali vozlišča prek ' textContent ” nepremičnina je navedena tukaj:
element. textContent | vozlišče. textContentPovratna vrednost: ' textContent lastnost vrne besedilo ” elementa ali vozlišča z razmikom, vendar brez njegovih notranjih oznak HTML.
Zdaj praktično uporabite zgoraj definirane sintakse za dostop in upravljanje lastnosti »textContent«.
Kako dostopati do lastnosti »textContent« elementa HTML DOM in ravnati z njo v JavaScriptu?
Podobno kot lastnosti »innerHTML« in »innerText«, je » textContent Lastnost uporabnikom omogoča tudi preprosto nastavitev, dostop in spreminjanje besedila želenega elementa. Ta razdelek izvaja vse te operacije na elementu z uporabo spodaj navedenih primerov.
Primer 1: Uporaba lastnosti »textContent« za dostop do besedila elementa/vozlišča
Ta primer uporabi lastnost »textContent« za vrnitev besedila določenega elementa ali vozlišča, vključno z vsemi njegovimi podrejenimi elementi.
HTML koda
< div id = 'myDiv' onmouseover = 'getText()' stil = 'obroba: 3px polna črna; širina: 400px; oblazinjenje: 5px 5px; rob: samodejno;' >< h1 > Prvi naslov < / h1 >
< h2 > Drugi naslov < / h2 >
< h3 > Tretji naslov < / h3 >
< h4 > Četrti naslov < / h4 >
< h5 > Peti naslov < / h5 >
< h6 > Šesti naslov < / h6 >
< / div >
V zgornjih vrsticah kode HTML:
- ' ” z ID-jem “myDiv” ustvari element div, ki je oblikovan z naslednjimi lastnostmi obroba, širina, oblazinjenje (zgoraj in spodaj, levo in desno) in rob. Prilaga tudi ' onmouseover ' dogodek, ki prikliče ' getText() ” funkcija, ko se uporabnik z miško pomakne nad njo.
- Znotraj div vse navedene oznake naslovov (h1, h2, h3, h4, h5 in h6) vstavijo elemente naslovov glede na njihove podane ravni.
Koda JavaScript
< scenarij >
funkcijo getText ( ) {
bil elem = dokument. getElementById ( 'myDiv' ) ;
opozorilo ( element. textContent ) ;
}
scenarij >V zgoraj napisanem bloku kode JavaScript:
- Definirajte funkcijo z imenom ' getText() ”.
- Znotraj te funkcije spremenljivka »elem« uporabi » getElementById() ” za dostop do elementa div prek njegovega id-ja.
- ' opozorilo() ' ustvari opozorilno polje, ki uporablja ' textContent ” za vrnitev besedila nadrejenega elementa div skupaj z vsemi njegovimi odvisnimi elementi.
Izhod
Spodnji izhod prikaže okno z opozorilom, ki prikazuje besedilno vsebino elementa div:
Primer 2: Uporaba lastnosti »textContent« za zamenjavo besedilne vsebine elementa, vključno z njegovimi nasledniki
Ta primer prikazuje, kako lastnost »textContent« zamenja vse podrejene elemente elementa, medtem ko spreminja njegovo besedilo.
HTML koda
< center >
< h1 id = 'moja glava' onclick = 'modifyText()' >< b > to b > je < razpon > Naslov < razpon > < jaz > Element jaz > h1 >
center >V zgoraj navedenih vrsticah kode:
- ' ” doda element naslova ravni 1 s priloženim onclick ' dogodek, ki prikliče ' modifyText() ”, ko uporabnik klikne nanj.
- Element naslova vsebuje tudi » ', ' «, in » ” označi kot svoje potomce. Oznaka “ ” se uporablja za krepko tiskanje priloženega niza, oznaka “” brez kakršnih koli lastnosti sloga se uporablja za uporabo brez sloga na danem nizu, oznaka “ ” pa se uporablja za prikaz naveden niz kot ležeče.
Koda JavaScript
< scenarij >
kjer je h1 = dokument. getElementById ( 'moja glava' ) ;
konzola. dnevnik ( h1 ) ;
funkcija modifyText ( ) {
h1. textContent = 'Dobrodošli v Linuxhintu!' ;
konzola. dnevnik ( h1 )
}
scenarij >V zgornji kodi JavaScript:
- Spremenljivka »h1« uporablja » document.getElementById() ” za dostop do elementa naslova prek njegovega dodeljenega ID-ja.
- ' console.log() ” prikaže dostopni element naslova na konzoli, preden spremeni njegovo vsebino.
- Funkcija z imenom ' modifyText() ' uporablja ' textContent ” za spreminjanje besedila pridobljenega elementa naslova.
- Zadnja metoda »console.log()« po spremembi ponovno prikaže vrednost »h1«.
Izhod
Na konzoli je jasno razvidno, da so bili vsi podrejeni elementi danega naslovnega elementa ob kliku nanj zamenjani z novo podanim besedilom:
Primer 3: Uporaba lastnosti »textContent« za spreminjanje besedila podrejenega elementa
Ta primer uporablja lastnost »textContent« za spreminjanje besedila podrejenega elementa.
HTML koda
< div id = 'myDiv' stil = 'obroba: 3px polna črna; širina: 400px; oblazinjenje: 5px 5px; rob: samodejno;' >
< center >
< gumb id = 'btn' onmouseover = 'spremembaBesedila()' > Stari gumb < / gumb >
< / center >
< / div >V tem primeru:
- Element »div« ima element »gumb«, ki je ustvarjen s pomočjo »
' oznaka. - Element gumba nadalje vsebuje dodeljeni ID in » onmouseover « dogodek, ki pokliče » spremeniBesedilo() ” funkcijo, ko miško premaknete nad njo.
Koda JavaScript
< scenarij >
je bil parentElement = dokument. getElementById ( 'myDiv' ) ;
var target = dokument. getElementById ( 'btn' ) ;
je bil find_me = parentElement. vsebuje ( tarča ) ;
če ( parentElement. vsebuje ( tarča ) == prav ) {
konzola. dnevnik ( Najdi me ) ;
funkcija changeText ( ) {
tarča. textContent = 'Nov gumb' ;
}
} drugače {
konzola. dnevnik ( 'Ne obstaja' )
}
scenarij >V zgornjem delčku kode:
- Spremenljivka »parentElement« uporablja » getElementById() ” za dostop do nadrejenega elementa div. Spremenljivka »target« prav tako uporablja metodo »getElementById()« za pridobitev dodanega elementa gumba z uporabo njegovega ID-ja.
- Spremenljivka »find_me« uporablja » vsebuje() ” za preverjanje, ali je ciljni element gumba podrejeni element diva ali ne. Ta metoda bo vrnila ' prav ” za “da” drugače “false”.
- ' če potem ” definira blok kode.
- Če je ciljni element podrejeni element nadrejenega elementa, potem je » spremeniBesedilo() ' bo spremenila svoje besedilo prek ' textContent ” lastnina. V nasprotnem primeru se bo izvedel kodni blok »else« za prikaz podanega sporočila z uporabo » console.log() ” metoda.
Izhod
Konzola prikazuje ' prav ” logična vrednost, ki potrdi, da je element gumba podrejeni element danega diva, nato pa se njegovo besedilo spremeni, ko miško premaknete nad njim:
Razlika med lastnostmi textContent, innerText in innerHTML?
Na splošno je ' textContent ', ' innerText «, in » notranjiHTML ” lastnosti obravnavajo besedilo elementa ali vozlišča na način nastavitve in pridobivanja. Vendar se te lastnosti med seboj razlikujejo glede na nekatere dejavnike. Ta razdelek poudarja glavne razlike med vsemi:
Pogoji 'textContent' 'notranje besedilo' “notranjiHTML” Vrsta povratka Vrne besedilo elementa, vključno z vsemi njegovimi podrejenimi elementi (oznake za oblikovanje), skritim besedilom CSS in presledkom. Ne vrne oznak HTML elementa. Vrne besedilno vsebino ciljnega elementa HTML z vsemi njegovimi podrejenimi elementi (oznake za oblikovanje). Ne vrne prostora, skritega besedila CSS in oznak HTML, razen