Denne veiledningen vil illustrere hvordan du får tilgang til og manipulerer HTML DOM-elementet 'textContent'-egenskapen i JavaScript.
Ta først en titt på det grunnleggende om HTML DOM 'textContent'-egenskapen.
Hva er HTML DOM 'textContent'-egenskapen i JavaScript?
« textContent ” er den innebygde egenskapen som setter, henter og endrer teksten til et spesifisert element eller node inkludert alle dets etterkommere. Etterkommerne er underordnede elementer som , , og mye mer som brukes til formateringsformål. Mens du angir teksten ved å bruke 'textContent'-egenskapen, erstattes etterkommerne av målelementet fullstendig med den nye teksten.
Syntaks (Angi tekstinnhold)
Den grunnleggende syntaksen for å angi teksten til et element/node ved å bruke ' textContent ' egenskapen er skrevet nedenfor:
element. textContent = tekst | node. textContent = tekst
Syntaksen ovenfor tar ønsket ' tekst ” som en verdi som brukeren ønsker å angi for et element eller node.
Syntaks (Få tekstinnhold)
Den generaliserte syntaksen for å returnere teksten til et element eller node via ' textContent ' eiendom er oppgitt her:
element. textContent | node. textContentReturverdi: « textContent ' egenskap returnerer ' tekst ” av et element eller node med mellomrom, men uten dens indre HTML-tagger.
Bruk nå de ovenfor definerte syntaksene praktisk talt for å få tilgang til og manipulere 'textContent'-egenskapen.
Hvordan få tilgang til og manipulere HTML DOM Element 'textContent' egenskapen i JavaScript?
I likhet med egenskapene 'innerHTML' og 'innerText', ' textContent ”-egenskapen lar også brukerne enkelt angi, få tilgang til og endre teksten til ønsket element. Denne delen utfører alle disse operasjonene på et element ved å bruke eksemplene nedenfor.
Eksempel 1: Bruk av egenskapen 'textContent' for å få tilgang til elementet/nodeteksten
Dette eksemplet bruker 'textContent'-egenskapen for å returnere teksten til et bestemt element eller node inkludert alle dets underordnede elementer.
HTML-kode
< div id = 'myDiv' på musen over = 'getText()' stil = 'kant: 3px helt svart; bredde: 400px; polstring: 5px 5px; margin: auto;' >< h1 > Første overskrift < / h1 >
< h2 > Andre overskrift < / h2 >
< h3 > Tredje overskrift < / h3 >
< h4 > Fjerde overskrift < / h4 >
< h5 > Femte overskrift < / h5 >
< h6 > Sjette overskrift < / h6 >
< / div >
I linjene ovenfor med HTML-kode:
- « ”-taggen som har en id “myDiv” lager et div-element som er stylet med følgende egenskaper kantlinje, bredde, polstring (øverst og nederst, venstre og høyre) og marg. Den legger også ved ' på musen over ' hendelse som påkaller ' getText() ”-funksjon når brukeren holder musen over den.
- Inne i div setter alle de spesifiserte heading(h1,h2,h3,h4,h5 og h6)-taggene inn overskriftselementene i henhold til de spesifiserte nivåene.
JavaScript-kode
< manus >
funksjonen getText ( ) {
var elem = dokument. getElementById ( 'myDiv' ) ;
varsling ( element. textContent ) ;
}
manus >I den ovenfor skrevne JavaScript-kodeblokken:
- Definer en funksjon kalt ' getText() '.
- Inne i denne funksjonen bruker 'elem'-variabelen ' getElementById() ”-metoden for å få tilgang til div-elementet gjennom dets id.
- « varsling() '-metoden oppretter en varslingsboks som bruker ' textContent ” egenskap for å returnere teksten til den overordnede div sammen med alle dens pårørende.
Produksjon
Utgangen nedenfor dukker opp en varselboks som viser tekstinnholdet til div-elementet:
Eksempel 2: Bruk av «textContent»-egenskapen for å erstatte et elementtekstinnhold inkludert dets etterkommere
Dette eksemplet viser hvordan 'textContent'-egenskapen erstatter alle underordnede av et element mens teksten endres.
HTML-kode
< senter >
< h1 id = 'hodet mitt' ved trykk = 'modifyText()' >< b > Dette b > er < span > Overskrift < span > < Jeg > Element Jeg > h1 >
senter >I de ovennevnte kodelinjene:
- « '-taggen legger til et overskriftselement på nivå 1 med en vedlagt ' ved trykk ' hendelse som påkaller ' modifyText() ”-funksjonen når brukeren klikker på den.
- Overskriftselementet inneholder også ' ', ' ', og ' ” merker som sine etterkommere. « »-taggen brukes til å fete den vedlagte strengen, «»-taggen uten noen stilegenskap brukes til å ikke bruke stil på den gitte strengen, og « »-taggen brukes til å vise angitt streng som kursiv.
JavaScript-kode
< manus >
hvor h1 = dokument. getElementById ( 'hodet mitt' ) ;
konsoll. Logg ( h1 ) ;
funksjon modifyText ( ) {
h1. textContent = 'Velkommen til Linuxhint!' ;
konsoll. Logg ( h1 )
}
manus >I JavaScript-koden ovenfor:
- Variabelen 'h1' bruker ' document.getElementById() ” metode for å få tilgang til overskriftselementet gjennom dets tilordnede id.
- « console.log() ”-metoden viser det åpnede overskriftselementet på konsollen før innholdet endres.
- Funksjonen som heter ' modifyText() ' bruker ' textContent ”-egenskapen for å endre teksten til det hentede overskriftselementet.
- Den siste «console.log()»-metoden viser igjen «h1»-verdien etter endring.
Produksjon
Konsollen viser tydelig at alle barna til det gitte overskriftselementet er erstattet med den nylig spesifiserte teksten ved å klikke på den:
Eksempel 3: Bruk av «textContent»-egenskapen for å endre teksten til elementets underordnede
Dette eksemplet bruker egenskapen 'textContent' for å endre teksten til det spesifikke elementets underordnede.
HTML-kode
< div id = 'myDiv' stil = 'kant: 3px helt svart; bredde: 400px; polstring: 5px 5px; margin: auto;' >
< senter >
< knapp id = 'btn' på musen over = 'changeText()' > Gammel knapp < / knapp >
< / senter >
< / div >I dette scenariet:
- 'div'-elementet har et 'knapp'-element som er opprettet ved hjelp av '
' stikkord. - Knappeelementet inneholder videre en tildelt id og en ' på musen over ' hendelse som kaller ' endreTekst() ”-funksjonen når musen svever over den.
JavaScript-kode
< manus >
var parentElement = dokument. getElementById ( 'myDiv' ) ;
var mål = dokument. getElementById ( 'btn' ) ;
var finn_meg = parentElement. inneholder ( mål ) ;
hvis ( parentElement. inneholder ( mål ) == ekte ) {
konsoll. Logg ( Finn meg ) ;
funksjon endreTekst ( ) {
mål. textContent = 'Ny knapp' ;
}
} ellers {
konsoll. Logg ( 'Eksisterer ikke' )
}
manus >I kodebiten ovenfor:
- Variabelen 'parentElement' bruker ' getElementById() ” metode for å få tilgang til det overordnede div-elementet. 'target'-variabelen bruker også 'getElementById()'-metoden for å hente det tilføyde knappeelementet ved å bruke dets id.
- 'find_me'-variabelen bruker ' inneholder() ”-metoden for å sjekke om det målrettede knappelementet er barnet til div eller ikke. Denne metoden vil returnere ' ekte ' for 'ja' ellers 'false'.
- « hvis-annet ”-setning definerer en kodeblokk.
- Hvis det målrettede elementet er barnet til det overordnede elementet, vil ' endreTekst() '-funksjonen vil endre teksten via ' textContent ' eiendom. Ellers vil 'else'-kodeblokken utføres for å vise den spesifiserte meldingen ved å bruke ' console.log() 'metoden.
Produksjon
Konsollen viser en ' ekte ” boolsk verdi som bekrefter at knappeelementet er barnet til den gitte div, og deretter endres teksten når du holder musen over den:
Forskjellen mellom textContent, innerText og innerHTML egenskaper?
Generelt er ' textContent ', ' indreTekst ', og ' indreHTML ” egenskaper omhandler teksten til et element eller node i måten å sette og hente det på. Imidlertid er disse egenskapene forskjellige fra hverandre basert på noen faktorer. Denne delen fremhever hovedforskjellene mellom dem alle:
Vilkår “textContent” 'innerText' 'innerHTML' Returtype Den returnerer teksten til et element, inkludert alle dets underordnede (formateringskoder), skjult CSS-tekst og mellomrom. Den returnerer ikke HTML-taggene til et element. Den returnerer tekstinnholdet til det målrettede HTML-elementet med alle underordnede (formateringskoder). Den returnerer ikke mellomrom, skjult CSS-tekst og HTML-tagger bortsett fra