Denne vejledning vil illustrere, hvordan du får adgang til og manipulerer HTML DOM-elementet 'textContent'-egenskaben i JavaScript.
Først skal du tage et kig på det grundlæggende i HTML DOM 'textContent' egenskaben.
Hvad er HTML DOM 'textContent' egenskaben i JavaScript?
Det ' tekstindhold ” er den indbyggede egenskab, der indstiller, henter og ændrer teksten i et specificeret element eller node inklusive alle dets efterkommere. De efterkommere er underordnede elementer såsom , , og meget mere, der bruges til formateringsformål. Mens du indstiller teksten ved hjælp af egenskaben 'textContent', erstattes efterkommerne af det målrettede element fuldstændigt med den nye tekst.
Syntaks (Angiv tekstindhold)
Den grundlæggende syntaks til at indstille teksten til et element/node ved hjælp af ' tekstindhold ” ejendom er skrevet nedenfor:
element. tekstindhold = tekst | node. tekstindhold = tekst
Ovenstående syntaks tager den ønskede ' tekst ” som en værdi, som brugeren ønsker at indstille for et element eller node.
Syntaks (Få tekstindhold)
Den generaliserede syntaks til at returnere teksten i et element eller node via ' tekstindhold ” ejendom er angivet her:
element. tekstindhold | node. tekstindholdReturneringsværdi: Det ' tekstindhold ' egenskab returnerer ' tekst ” af et element eller node med mellemrum, men uden dets indre HTML-tags.
Brug nu de ovenfor definerede syntakser praktisk talt til at få adgang til og manipulere egenskaben 'textContent'.
Hvordan får man adgang til og manipulerer HTML DOM Element 'textContent' egenskaben i JavaScript?
I lighed med egenskaberne 'innerHTML' og 'innerText', ' tekstindhold egenskaben giver også brugerne mulighed for nemt at indstille, få adgang til og ændre teksten i det ønskede element. Dette afsnit udfører alle disse operationer på et element ved hjælp af de nedenfor angivne eksempler.
Eksempel 1: Anvendelse af egenskaben 'textContent' for at få adgang til elementet/knudeteksten
Dette eksempel anvender egenskaben 'textContent' til at returnere teksten for et bestemt element eller node inklusive alle dets underordnede elementer.
HTML kode
< div id = 'myDiv' over musen = 'getText()' stil = 'kant: 3px ensfarvet sort; bredde: 400px; polstring: 5px 5px; margin: auto;' >< h1 > Første overskrift < / h1 >
< h2 > Anden overskrift < / h2 >
< h3 > Tredje overskrift < / h3 >
< h4 > Fjerde overskrift < / h4 >
< h5 > Femte overskrift < / h5 >
< h6 > Sjette overskrift < / h6 >
< / div >
I ovenstående linjer med HTML-kode:
- Det ' ” tag med et id “myDiv” opretter et div-element, der er stylet med følgende egenskaber kant, bredde, polstring (top og bund, venstre og højre) og margen. Den vedhæfter også ' over musen ' begivenhed, der påberåber sig ' getText() ”-funktion, når brugeren holder musen over den.
- Inde i div indsætter alle de specificerede overskrift(h1,h2,h3,h4,h5 og h6) tags overskriftselementerne i henhold til deres specificerede niveauer.
JavaScript kode
< manuskript >
funktion getText ( ) {
var elem = dokument. getElementById ( 'myDiv' ) ;
alert ( element. tekstindhold ) ;
}
manuskript >I den ovenfor skrevne JavaScript-kodeblok:
- Definer en funktion ved navn ' getText() ”.
- Inde i denne funktion anvender 'elem'-variablen ' getElementById() ” metode til at få adgang til div-elementet gennem dets id.
- Det ' alert() '-metoden opretter en advarselsboks, der bruger ' tekstindhold ” egenskab for at returnere teksten fra den overordnede div sammen med alle dens pårørende.
Produktion
Nedenstående output popper op en advarselsboks, der viser tekstindholdet i div-elementet:
Eksempel 2: Anvendelse af egenskaben 'textContent' til at erstatte et elementtekstindhold inklusive dets efterkommere
Dette eksempel viser, hvordan egenskaben 'textContent' erstatter alle underordnede elementer i et element, mens dets tekst ændres.
HTML kode
< centrum >
< h1 id = 'mit hoved' onclick = 'modifyText()' >< b > Det her b > er < span > Overskrift < span > < jeg > Element jeg > h1 >
centrum >I de ovennævnte kodelinjer:
- Det ' ' tag tilføjer et overskriftselement på niveau 1 med en vedhæftet ' onclick ' begivenhed, der påberåber sig ' modifyText() ”-funktion, når brugeren klikker på den.
- Overskriftselementet indeholder også ' ', ' ', og ' ” tags som dens efterkommere. ' '-tagget bruges til at fed den vedlagte streng, ''-tagget uden nogen formgivningsegenskab bruges til ikke at anvende nogen styling på den givne streng, og ' '-tagget bruges til at vise angivet streng som kursiv.
JavaScript kode
< manuskript >
hvor h1 = dokument. getElementById ( 'mit hoved' ) ;
konsol. log ( h1 ) ;
funktion modifyText ( ) {
h1. tekstindhold = 'Velkommen til Linuxhint!' ;
konsol. log ( h1 )
}
manuskript >I ovenstående JavaScript-kode:
- Variablen 'h1' bruger ' document.getElementById() ” metode til at få adgang til overskriftselementet gennem dets tildelte id.
- Det ' console.log() ”-metoden viser det tilgåede overskriftselement på konsollen, før dets indhold ændres.
- Funktionen kaldet ' modifyText() ' bruger ' tekstindhold ” egenskab for at ændre teksten i det hentede overskriftselement.
- Den sidste 'console.log()'-metode viser igen 'h1'-værdien efter ændring.
Produktion
Konsollen viser tydeligt, at alle underordnede af det givne overskriftselement er blevet erstattet med den nyligt specificerede tekst ved at klikke på den:
Eksempel 3: Anvendelse af egenskaben 'textContent' til at ændre teksten til elementets underordnede
Dette eksempel bruger egenskaben 'textContent' til at ændre teksten for det specifikke elements underordnede.
HTML kode
< div id = 'myDiv' stil = 'kant: 3px ensfarvet sort; bredde: 400px; polstring: 5px 5px; margin: auto;' >
< centrum >
< knap id = 'btn' over musen = 'changeText()' > Gammel knap < / knap >
< / centrum >
< / div >I dette scenarie:
- 'div'-elementet har et 'knap'-element, der er oprettet ved hjælp af '
” tag. - Knapelementet indeholder yderligere et tildelt id og et ' over musen ' begivenhed, der kalder ' changeText() ”-funktion, når musen svæver over den.
JavaScript kode
< manuskript >
var parentElement = dokument. getElementById ( 'myDiv' ) ;
var mål = dokument. getElementById ( 'btn' ) ;
var find_me = parentElement. indeholder ( mål ) ;
hvis ( parentElement. indeholder ( mål ) == rigtigt ) {
konsol. log ( Find mig ) ;
funktionsændringTekst ( ) {
mål. tekstindhold = 'Ny knap' ;
}
} andet {
konsol. log ( 'Eksisterer ikke' )
}
manuskript >I ovenstående kodestykke:
- Variablen 'parentElement' anvender ' getElementById() ” metode til at få adgang til det overordnede div-element. 'target'-variablen bruger også 'getElementById()'-metoden til at hente det tilføjede knapelement ved hjælp af dets id.
- Variablen 'find_mig' bruger ' indeholder() ” metode til at kontrollere, om det målrettede knapelement er underordnet af div eller ej. Denne metode vil returnere ' rigtigt ' for 'ja' ellers 'falsk'.
- Det ' hvis ellers ”-sætning definerer en kodeblok.
- Hvis det målrettede element er underordnet af det overordnede element, så ' changeText() '-funktionen vil ændre sin tekst via ' tekstindhold ” ejendom. Ellers vil 'andet'-kodeblokken udføres for at vise den angivne meddelelse ved hjælp af ' console.log() ” metode.
Produktion
Konsollen viser en ' rigtigt ” boolesk værdi, der bekræfter, at knapelementet er underordnet af den givne div, og derefter ændres teksten ved at holde musen over den:
Forskel mellem textContent, innerText og innerHTML-egenskaber?
Generelt er ' tekstindhold ', ' indreTekst ', og ' indreHTML ” egenskaber beskæftiger sig med teksten i et element eller en node i måden at indstille og hente det. Disse egenskaber er dog forskellige fra hinanden baseret på nogle faktorer. Dette afsnit fremhæver de vigtigste forskelle mellem dem alle:
Betingelser 'tekstindhold' 'indre tekst' 'innerHTML' Returtype Det returnerer teksten af et element inklusive alle dets børn (formateringstags), skjult CSS-tekst og mellemrum. Det returnerer ikke HTML-tags for et element. Det returnerer tekstindholdet i det målrettede HTML-element med alle dets børn (formateringstags). Det returnerer ikke mellemrum, skjult CSS-tekst og HTML-tags undtagen