Deze handleiding illustreert hoe u de eigenschap 'textContent' van het HTML DOM-element in JavaScript kunt openen en manipuleren.
Kijk eerst eens naar de basisprincipes van de HTML DOM-eigenschap “textContent”.
Wat is de HTML DOM-eigenschap “textContent” in JavaScript?
De ' tekstInhoud ” is de ingebouwde eigenschap die de tekst van een opgegeven element of knooppunt, inclusief alle onderliggende elementen, instelt, ophaalt en wijzigt. De nakomelingen zijn onderliggende elementen zoals , , en nog veel meer die worden gebruikt voor opmaakdoeleinden. Terwijl u de tekst instelt met behulp van de eigenschap “textContent”, worden de nakomelingen van het beoogde element volledig vervangen door de nieuwe tekst.
Syntaxis (tekstinhoud instellen)
De basissyntaxis om de tekst van een element/knooppunt in te stellen met behulp van de “ tekstInhoud ' eigendom staat hieronder geschreven:
element. tekstInhoud = tekst | knooppunt. tekstInhoud = tekst
De bovenstaande syntaxis neemt de gewenste “ tekst ” als een waarde die de gebruiker wil instellen voor een element of knooppunt.
Syntaxis (tekstinhoud ophalen)
De gegeneraliseerde syntaxis om de tekst van een element of knooppunt terug te geven via de “ tekstInhoud ” eigendom wordt hier vermeld:
element. tekstInhoud | knooppunt. tekstInhoudWinstwaarde: De ' tekstInhoud 'eigenschap retourneert de' tekst ” van een element of knooppunt met spatiëring maar zonder de interne HTML-tags.
Gebruik nu de hierboven gedefinieerde syntaxis praktisch om toegang te krijgen tot de eigenschap “textContent” en deze te manipuleren.
Hoe kan ik de eigenschap “textContent” van het HTML DOM-element in JavaScript openen en manipuleren?
Vergelijkbaar met de eigenschappen “innerHTML” en “innerText”, de “ tekstInhoud Met de eigenschap kunnen gebruikers de tekst van het gewenste element ook eenvoudig instellen, openen en wijzigen. In deze sectie worden al deze bewerkingen op een element uitgevoerd met behulp van de onderstaande voorbeelden.
Voorbeeld 1: De eigenschap “textContent” toepassen om toegang te krijgen tot de element-/knooppunttekst
In dit voorbeeld wordt de eigenschap 'textContent' toegepast om de tekst van een bepaald element of knooppunt, inclusief alle onderliggende elementen, te retourneren.
HTML code
< div ID kaart = 'mijnDiv' opmousover = 'getText()' stijl = 'rand: 3px effen zwart; breedte: 400px; opvulling: 5px 5px; marge: auto;' >< h1 > Eerste rubriek < / h1 >
< h2 > Tweede rubriek < / h2 >
< h3 > Derde rubriek < / h3 >
< h4 > Vierde rubriek < / h4 >
< h5 > Vijfde rubriek < / h5 >
< h6 > Zesde rubriek < / h6 >
< / div >
In de bovenstaande regels HTML-code:
- De ' ”-tag met de id “myDiv” creëert een div-element dat is opgemaakt met de volgende eigenschappen: border, width, opvulling (boven en onder, links en rechts) en marge. Het voegt ook de “ opmousover gebeurtenis die een beroep doet op de getText() ”-functie wanneer de gebruiker er met de muis overheen beweegt.
- Binnen de div voegen alle opgegeven header(h1,h2,h3,h4,h5 en h6)-tags de header-elementen in volgens hun opgegeven niveaus.
JavaScript-code
< script >
functie getText ( ) {
was elem = document. getElementById ( 'mijnDiv' ) ;
alert ( element. tekstInhoud ) ;
}
script >In het hierboven geschreven JavaScript-codeblok:
- Definieer een functie met de naam “ getText() ”.
- Binnen deze functie past de variabele “elem” de “ getElementById() ”-methode om toegang te krijgen tot het div-element via zijn id.
- De ' waarschuwing() ”-methode creëert een waarschuwingsvenster dat gebruik maakt van de “ tekstInhoud ”-eigenschap om de tekst van de bovenliggende div terug te geven, samen met al zijn afhankelijke elementen.
Uitvoer
De onderstaande uitvoer geeft een waarschuwingsvenster weer met de tekstinhoud van het div-element:
Voorbeeld 2: De eigenschap “textContent” toepassen om een element met tekstinhoud, inclusief de onderliggende elementen, te vervangen
Dit voorbeeld laat zien hoe de eigenschap “textContent” alle onderliggende elementen van een element vervangt terwijl de tekst ervan wordt gewijzigd.
HTML code
< centrum >
< h1 idd = 'mijn hoofd' bij klikken = 'WijzigTekst()' >< B > Dit B > is < span > Rubriek < span > < i > Element i > h1 >
centrum >In de bovengenoemde coderegels:
- De ' ”-tag voegt een kopelement van niveau 1 toe met een bijgevoegde “ bij klikken gebeurtenis die een beroep doet op de wijzigTekst() ”-functie wanneer de gebruiker erop klikt.
- Het kopelement bevat ook de “ ', ' ', En '
'-tags als zijn nakomelingen. De tag “ ” wordt gebruikt om de bijgevoegde tekenreeks vetgedrukt te maken, de tag “” zonder stijleigenschap wordt gebruikt om geen stijl op de gegeven tekenreeks toe te passen, en de tag “ ” wordt gebruikt om de tekst weer te geven opgegeven tekenreeks cursief.
JavaScript-code
< script >
waar h1 = document. getElementById ( 'mijn hoofd' ) ;
troosten. loggen ( h1 ) ;
functie wijzigTekst ( ) {
h1. tekstInhoud = 'Welkom bij Linuxhint!' ;
troosten. loggen ( h1 )
}
script >In de bovenstaande JavaScript-code:
- De variabele “h1” gebruikt de “ document.getElementById() ”-methode om toegang te krijgen tot het kopelement via de toegewezen id.
- De ' console.log() ”-methode geeft het geopende kopelement op de console weer voordat de inhoud ervan wordt gewijzigd.
- De functie met de naam “ wijzigTekst() ” gebruikt de “ tekstInhoud ” om de tekst van het opgehaalde kopelement te wijzigen.
- De laatste “console.log()”-methode geeft na wijziging opnieuw de “h1”-waarde weer.
Uitvoer
De console laat duidelijk zien dat alle kinderen van het gegeven kopelement zijn vervangen door de nieuw gespecificeerde tekst wanneer erop wordt geklikt:
Voorbeeld 3: De eigenschap “textContent” toepassen om de tekst van het onderliggende element te wijzigen
In dit voorbeeld wordt de eigenschap “textContent” gebruikt om de tekst van het onderliggende element van het specifieke element te wijzigen.
HTML code
< div ID kaart = 'mijnDiv' stijl = 'rand: 3px effen zwart; breedte: 400px; opvulling: 5px 5px; marge: auto;' >
< centrum >
< knop ID kaart = 'btn' opmousover = 'wijzigTekst()' > Oude knop < / knop >
< / centrum >
< / div >In dit scenario:
- Het “div”-element heeft een “button”-element dat is gemaakt met behulp van de “
' label. - Het knopelement bevat verder een toegewezen ID en een “ opmousover evenement dat de “ veranderTekst() ”-functie wanneer de muis erover beweegt.
JavaScript-code
< script >
was parentElement = document. getElementById ( 'mijnDiv' ) ;
var doel = document. getElementById ( 'btn' ) ;
was find_me = ouderElement. bevat ( doel ) ;
als ( ouderElement. bevat ( doel ) == WAAR ) {
troosten. loggen ( vind me ) ;
functie changeText ( ) {
doel. tekstInhoud = 'Nieuwe knop' ;
}
} anders {
troosten. loggen ( 'Bestaat niet' )
}
script >In het bovenstaande codefragment:
- De variabele “parentElement” past de “ getElementById() ”-methode om toegang te krijgen tot het bovenliggende div-element. De “target”-variabele maakt ook gebruik van de “getElementById()”-methode om het toegevoegde knopelement op te halen met behulp van zijn id.
- De variabele “find_me” gebruikt de “ bevat() ”-methode om te controleren of het beoogde knopelement het onderliggende element van de div is of niet. Deze methode retourneert “ WAAR ” voor “ja” anders “onwaar”.
- De ' als-anders ”-instructie definieert een codeblok.
- Als het beoogde element het kind is van het bovenliggende element, dan wordt de “ veranderTekst() ”-functie zal de tekst wijzigen via de “ tekstInhoud ' eigendom. Anders wordt het codeblok “else” uitgevoerd om het opgegeven bericht weer te geven met behulp van de tekst “ console.log() methode.
Uitvoer
De console toont een “ WAAR ” Booleaanse waarde die verifieert dat het knopelement het kind is van de gegeven div en dat de tekst ervan verandert als u er met de muis overheen beweegt:
Verschil tussen textContent, innerText en innerHTML-eigenschappen?
Over het algemeen is de “ tekstInhoud ', ' innerlijkeTekst ', En ' innerlijkeHTML Eigenschappen hebben betrekking op de tekst van een element of knooppunt bij de manier waarop deze wordt ingesteld en opgehaald. Deze eigenschappen verschillen echter van elkaar op basis van een aantal factoren. In dit gedeelte worden de belangrijkste verschillen tussen deze allemaal belicht:
Voorwaarden 'tekstInhoud' 'innerlijke tekst' “innerHTML” Retourtype Het retourneert de tekst van een element inclusief alle onderliggende elementen (opmaaktags), verborgen CSS-tekst en spatie. Het retourneert niet de HTML-tags van een element. Het retourneert de tekstinhoud van het beoogde HTML-element met al zijn onderliggende elementen (opmaaktags). Het retourneert geen spatie, verborgen CSS-tekst en HTML-tags, behalve