Ovaj vodič će ilustrirati kako pristupiti i manipulirati svojstvom HTML DOM elementa “textContent” u JavaScriptu.
Najprije pogledajte osnove HTML DOM svojstva “textContent”.
Što je svojstvo HTML DOM “textContent” u JavaScriptu?
' textContent ” je ugrađeno svojstvo koje postavlja, dohvaća i mijenja tekst određenog elementa ili čvora uključujući sve njegove potomke. Potomci su podređeni elementi kao što su , , i još mnogo toga koji se koriste u svrhe oblikovanja. Tijekom postavljanja teksta pomoću svojstva “textContent”, potomci ciljanog elementa potpuno su zamijenjeni novim tekstom.
Sintaksa (Postavi tekstualni sadržaj)
Osnovna sintaksa za postavljanje teksta elementa/čvora pomoću ' textContent ” svojstvo je napisano ispod:
element. textContent = tekst | čvor. textContent = tekst
Gornja sintaksa uzima željeni ' tekst ” kao vrijednost koju korisnik želi postaviti za element ili čvor.
Sintaksa (Dohvati tekstualni sadržaj)
Generalizirana sintaksa za vraćanje teksta elementa ili čvora putem ' textContent ” nekretnina je navedena ovdje:
element. textContent | čvor. textContentPovratna vrijednost: ' textContent svojstvo vraća ' tekst ” elementa ili čvora s razmakom, ali bez njegovih unutarnjih HTML oznaka.
Sada praktično upotrijebite gore definirane sintakse za pristup svojstvu 'textContent' i upravljanje njime.
Kako pristupiti i manipulirati svojstvom HTML DOM elementa “textContent” u JavaScriptu?
Slično svojstvima 'innerHTML' i 'innerText', ' textContent ” svojstvo također omogućuje korisnicima jednostavno postavljanje, pristup i izmjenu teksta željenog elementa. Ovaj odjeljak izvodi sve ove operacije na elementu pomoću dolje navedenih primjera.
Primjer 1: Primjena svojstva “textContent” za pristup tekstu elementa/čvora
Ovaj primjer primjenjuje svojstvo 'textContent' za vraćanje teksta određenog elementa ili čvora uključujući svu njegovu djecu.
HTML kôd
< div iskaznica = 'myDiv' prelazak mišem = 'getText()' stil = 'obrub: 3px puna crna; širina: 400px; ispuna: 5px 5px; margina: auto;' >< h1 > Prvi naslov < / h1 >
< h2 > Drugi naslov < / h2 >
< h3 > Treći naslov < / h3 >
< h4 > Četvrti naslov < / h4 >
< h5 > Peti naslov < / h5 >
< h6 > Šesti naslov < / h6 >
< / div >
U gornjim redcima HTML koda:
- ' ” oznaka koja ima ID „myDiv” stvara div element koji je stiliziran sa sljedećim svojstvima rub, širina, ispuna (gore i dolje, lijevo i desno) i margina. Također prilaže ' prelazak mišem ' događaj koji poziva ' getText() ” kada korisnik prijeđe mišem preko njega.
- Unutar diva, sve navedene oznake naslova (h1, h2, h3, h4, h5 i h6) umeću elemente naslova prema njihovim navedenim razinama.
JavaScript kod
< skripta >
funkcija getText ( ) {
bio elem = dokument. getElementById ( 'myDiv' ) ;
uzbuna ( element. textContent ) ;
}
skripta >U gore napisanom bloku JavaScript koda:
- Definirajte funkciju pod nazivom ' getText() ”.
- Unutar ove funkcije, varijabla 'elem' primjenjuje ' getElementById() ” za pristup elementu div putem njegovog ID-a.
- ' upozorenje() ' stvara okvir upozorenja koji koristi ' textContent ” za vraćanje teksta nadređenog diva zajedno sa svim ovisnicima.
Izlaz
Donji izlaz iskače okvir s upozorenjem koji prikazuje tekstualni sadržaj elementa div:
Primjer 2: Primjena svojstva “textContent” za zamjenu tekstualnog sadržaja elementa uključujući njegove potomke
Ovaj primjer pokazuje kako svojstvo “textContent” zamjenjuje sve potomke elementa dok mijenja njegov tekst.
HTML kôd
< centar >
< h1 id = 'moja glava' na klik = 'modifyText()' >< b > Ovaj b > je < raspon > Naslov < raspon > < ja > Element ja > h1 >
centar >U gore navedenim linijama koda:
- ' ” dodaje element naslova razine 1 s priloženim “ na klik ' događaj koji poziva ' modifyText() ” kada korisnik klikne na nju.
- Element naslova također sadrži ' ', ' ', i ' ” označava kao svoje potomke. Oznaka “ ” koristi se za podebljavanje priloženog niza, oznaka “” bez ikakvih svojstava stiliziranja koristi se za primjenu stila na dati niz, a oznaka “ ” koristi se za prikaz navedeni niz kao kurziv.
JavaScript kod
< skripta >
gdje je h1 = dokument. getElementById ( 'moja glava' ) ;
konzola. log ( h1 ) ;
funkcija modifyText ( ) {
h1. textContent = 'Dobro došli u Linuxhint!' ;
konzola. log ( h1 )
}
skripta >U gornjem JavaScript kodu:
- Varijabla 'h1' koristi ' document.getElementById() ” za pristup elementu naslova preko njegovog dodijeljenog ID-a.
- ' konzola.log() ” prikazuje pristupni element naslova na konzoli prije nego što promijeni njegov sadržaj.
- Funkcija pod nazivom ' modifyText() ' koristi ' textContent ” za izmjenu teksta dohvaćenog elementa naslova.
- Posljednja metoda “console.log()” ponovno prikazuje vrijednost “h1” nakon izmjene.
Izlaz
Konzola jasno pokazuje da su sva djeca zadanog elementa naslova zamijenjena novonavedenim tekstom nakon klika na njega:
Primjer 3: Primjena svojstva 'textContent' za izmjenu teksta podređenog elementa
Ovaj primjer koristi svojstvo 'textContent' za izmjenu teksta podređenog elementa.
HTML kôd
< div iskaznica = 'myDiv' stil = 'obrub: 3px puna crna; širina: 400px; ispuna: 5px 5px; margina: auto;' >
< centar >
< dugme iskaznica = 'btn' prelazak mišem = 'promijeniTekst()' > Staro dugme < / dugme >
< / centar >
< / div >U ovom scenariju:
- Element 'div' ima element 'button' koji se stvara uz pomoć '
” oznaka. - Element gumba dalje sadrži dodijeljeni ID i ' prelazak mišem ' događaj koji poziva ' promijeniTekst() ” kada mišem prijeđete iznad njega.
JavaScript kod
< skripta >
bio je parentElement = dokument. getElementById ( 'myDiv' ) ;
var target = dokument. getElementById ( 'btn' ) ;
bio find_me = parentElement. sadrži ( cilj ) ;
ako ( parentElement. sadrži ( cilj ) == pravi ) {
konzola. log ( Nađi me ) ;
promjena teksta funkcije ( ) {
cilj. textContent = 'Novi gumb' ;
}
} drugo {
konzola. log ( 'Ne postoji' )
}
skripta >U gornjem isječku koda:
- Varijabla 'parentElement' primjenjuje ' getElementById() ” za pristup nadređenom div elementu. Varijabla 'target' također koristi metodu 'getElementById()' za dohvaćanje dodanog elementa gumba koristeći njegov ID.
- Varijabla 'find_me' koristi ' sadrži () ” za provjeru je li ciljani element gumba dijete diva ili nije. Ova metoda će vratiti ' pravi ” za “da” inače “lažno”.
- ' ako-drugače ” naredba definira blok koda.
- Ako je ciljani element dijete nadređenog elementa, tada se ' promijeniTekst() ' funkcija će promijeniti svoj tekst putem ' textContent ” vlasništvo. U suprotnom, blok koda “else” će se izvršiti za prikaz navedene poruke pomoću “ konzola.log() ” metoda.
Izlaz
Konzola prikazuje ' pravi ” Booleova vrijednost koja provjerava da je element gumba dijete zadanog diva, a zatim se njegov tekst mijenja nakon što mišem prijeđete preko njega:
Razlika između svojstava textContent, innerText i innerHTML?
Općenito, ' textContent ', ' unutarnjiTekst ', i ' unutarnjiHTML ” svojstva bave se tekstom elementa ili čvora na način postavljanja i dobivanja. Međutim, ova se svojstva razlikuju jedna od druge na temelju nekih čimbenika. Ovaj odjeljak ističe glavne razlike između svih njih:
Pojmovi 'textContent' 'unutarnji tekst' “unutarnjiHTML” Vrsta povrata Vraća tekst elementa uključujući svu njegovu djecu (oznake za oblikovanje), CSS skriveni tekst i razmak. Ne vraća HTML oznake elementa. Vraća tekstualni sadržaj ciljanog HTML elementa sa svim njegovim podređenim elementima (oznake za oblikovanje). Ne vraća razmak, CSS skriveni tekst i HTML oznake osim