Šī rokasgrāmata ilustrēs, kā piekļūt HTML DOM elementa “textContent” rekvizītam un manipulēt ar to JavaScript.
Vispirms apskatiet HTML DOM rekvizīta “textContent” pamatus.
Kas ir HTML DOM “textContent” rekvizīts JavaScript?
' teksta saturs ” ir iebūvēts rekvizīts, kas iestata, izgūst un modificē noteikta elementa vai mezgla tekstu, tostarp visus tā pēcnācējus. Pēcnācēji ir pakārtotie elementi, piemēram, , , un daudzi citi elementi, kas tiek izmantoti formatēšanai. Iestatot tekstu, izmantojot rekvizītu “textContent”, mērķa elementa pēcnācēji tiek pilnībā aizstāti ar jauno tekstu.
Sintakse (iestatīt teksta saturu)
Pamata sintakse elementa/mezgla teksta iestatīšanai, izmantojot “ teksta saturs ” īpašums ir rakstīts zemāk:
elements. teksta saturs = tekstu | mezgls. teksta saturs = tekstu
Iepriekš minētā sintakse aizņem vēlamo ' tekstu ” kā vērtību, ko lietotājs vēlas iestatīt elementam vai mezglam.
Sintakse (Iegūt teksta saturu)
Vispārinātā sintakse elementa vai mezgla teksta atgriešanai, izmantojot “ teksta saturs ” īpašums ir norādīts šeit:
elements. teksta saturs | mezgls. teksta satursAtgriešanas vērtība: ' teksta saturs 'īpašums atgriež' tekstu ” elementa vai mezgla ar atstarpēm, bet bez iekšējiem HTML tagiem.
Tagad praktiski izmantojiet iepriekš definētās sintakses, lai piekļūtu rekvizīta “textContent” un ar to manipulētu.
Kā piekļūt un manipulēt ar HTML DOM elementa “textContent” rekvizītu JavaScript?
Līdzīgi kā “innerHTML” un “innerText” rekvizīti, “ teksta saturs ” rekvizīts arī ļauj lietotājiem viegli iestatīt, piekļūt un mainīt vajadzīgā elementa tekstu. Šajā sadaļā visas šīs darbības tiek veiktas ar elementu, izmantojot tālāk norādītos piemērus.
1. piemērs: rekvizīta “textContent” lietošana, lai piekļūtu elementa/mezgla tekstam
Šajā piemērā tiek izmantots rekvizīts “textContent”, lai atgrieztu konkrēta elementa vai mezgla tekstu, ieskaitot visus tā atvasinājumus.
HTML kods
< div id = 'myDiv' uzvediet peles kursoru = 'getText()' stils = 'apmale: 3 pikseļi viendabīgi melna; platums: 400 pikseļi; polsterējums: 5 pikseļi 5 pikseļi; mala: automātiska;' >< h1 > Pirmais virsraksts < / h1 >
< h2 > Otrais virsraksts < / h2 >
< h3 > Trešā virsraksts < / h3 >
< h4 > Ceturtā virsraksts < / h4 >
< h5 > Piektā virsraksts < / h5 >
< h6 > Sestā virsraksts < / h6 >
< / div >
Iepriekš minētajās HTML koda rindās:
- ' ” tags ar ID “myDiv” izveido div elementu, kas veidots ar šādām īpašībām apmale, platums, polsterējums (augšējā un apakšējā, kreisā un labā) un piemale. Tam pievienots arī ' virs peles 'notikums, kas izsauc ' getText() ” funkcija, kad lietotājs novieto peles kursoru virs tās.
- Divdaļā visi norādītie virsrakstu (h1, h2, h3, h4, h5 un h6) tagi ievieto virsraksta elementus atbilstoši to norādītajiem līmeņiem.
JavaScript kods
< skripts >
funkcija getText ( ) {
bija elem = dokumentu. getElementById ( 'myDiv' ) ;
brīdinājums ( elements. teksta saturs ) ;
}
skripts >Iepriekš rakstītajā JavaScript koda blokā:
- Definējiet funkciju ar nosaukumu ' getText() ”.
- Šajā funkcijā mainīgais “elem” piemēro “ getElementById() ” metodi, lai piekļūtu div elementam, izmantojot tā ID.
- ' brīdinājums () metode izveido brīdinājuma lodziņu, kas izmanto teksta saturs ” rekvizītu, lai atgrieztu vecāku div tekstu kopā ar visiem tā apgādājamajiem.
Izvade
Tālāk redzamajā izvadē tiek parādīts brīdinājuma lodziņš, kas parāda div elementa teksta saturu:
2. piemērs: rekvizīta “textContent” lietošana, lai aizstātu elementa teksta saturu, tostarp tā pēcnācējus
Šis piemērs parāda, kā rekvizīts “textContent” aizstāj visus elementa atvasinājumus, vienlaikus mainot tā tekstu.
HTML kods
< centrs >
< h1 id = 'mana galva' onclick = 'modifyText()' >< b > Šis b > ir < span > Virsraksts < span > < i > Elements i > h1 >
centrs >Iepriekš norādītajās koda rindās:
- ' tags pievieno 1. līmeņa virsraksta elementu ar pievienotu onclick 'notikums, kas izsauc ' modifyText() ” funkcija, kad lietotājs uz tās noklikšķina.
- Virsraksta elements satur arī ' ',' ', un ' ” atzīmē kā tās pēcnācējus. Tags “ ” tiek izmantots, lai pievienoto virkni treknrakstā, tags “” bez stila rekvizīta tiek izmantots, lai dotajai virknei nepiemērotu stilu, un tags “ ” tiek izmantots, lai parādītu norādītā virkne slīprakstā.
JavaScript kods
< skripts >
kur h1 = dokumentu. getElementById ( 'mana galva' ) ;
konsole. žurnāls ( h1 ) ;
funkcija modifyText ( ) {
h1. teksta saturs = 'Laipni lūdzam Linuxhint!' ;
konsole. žurnāls ( h1 )
}
skripts >Iepriekš minētajā JavaScript kodā:
- Mainīgais “h1” izmanto “ document.getElementById() ” metodi, lai piekļūtu virsraksta elementam, izmantojot tam piešķirto ID.
- ' console.log() ” metode parāda atvērto virsraksta elementu konsolē, pirms tiek mainīts tā saturs.
- Funkcija ar nosaukumu ' modifyText() ' izmanto ' teksta saturs ” rekvizītu, lai modificētu ienestā virsraksta elementa tekstu.
- Pēdējā “console.log()” metode pēc modifikācijas atkal parāda “h1” vērtību.
Izvade
Konsole skaidri parāda, ka visi dotā virsraksta elementa atvasinājumi ir aizstāti ar tikko norādīto tekstu, noklikšķinot uz tā:
3. piemērs: rekvizīta “textContent” lietošana, lai modificētu elementa bērna tekstu
Šajā piemērā tiek izmantots rekvizīts “textContent”, lai modificētu konkrētā elementa atvasinātā teksta tekstu.
HTML kods
< div id = 'myDiv' stils = 'apmale: 3 pikseļi viendabīgi melna; platums: 400 pikseļi; polsterējums: 5 pikseļi 5 pikseļi; mala: automātiska;' >
< centrs >
< pogu id = 'btn' uzvediet peles kursoru = 'mainītTeksts()' > Vecā poga < / pogu >
< / centrs >
< / div >Šajā scenārijā:
- Elementam “div” ir elements “button”, kas tiek izveidots, izmantojot “
” tagu. - Pogas elementā ir arī piešķirts ID un ' uzvediet peles kursoru 'pasākums, kas saucas ' changeText() ” funkcija, kad pele atrodas virs tās.
JavaScript kods
< skripts >
bija vecākuElement = dokumentu. getElementById ( 'myDiv' ) ;
var mērķis = dokumentu. getElementById ( 'btn' ) ;
bija atrast_mani = vecākuElements. satur ( mērķis ) ;
ja ( vecākuElements. satur ( mērķis ) == taisnība ) {
konsole. žurnāls ( Atrodi mani ) ;
funkcijas maiņaTeksts ( ) {
mērķis. teksta saturs = 'Jauna poga' ;
}
} cits {
konsole. žurnāls ( 'Neeksistē' )
}
skripts >Iepriekš minētajā koda fragmentā:
- Mainīgais “parentElement” piemēro “ getElementById() ” metodi, lai piekļūtu vecākajam div elementam. Mainīgais “target” izmanto arī metodi “getElementById()”, lai iegūtu pievienoto pogas elementu, izmantojot tā ID.
- Mainīgais “find_me” izmanto “ satur () ” metodi, lai pārbaudītu, vai atlasītais pogas elements ir div atvasinātais elements. Šī metode atgriezīs ' taisnība ” vietā “jā”, pretējā gadījumā “false”.
- ' ja-citādi ” paziņojums definē koda bloku.
- Ja mērķelements ir vecākelementa atvasinājums, tad “ changeText() funkcija mainīs savu tekstu, izmantojot teksta saturs ” īpašums. Pretējā gadījumā tiks izpildīts koda bloks “cits”, lai parādītu norādīto ziņojumu, izmantojot “ console.log() ” metode.
Izvade
Konsole parāda ' taisnība ” Būla vērtība, kas pārbauda pogas elementu, ir dotā div atvasinājums, un pēc tam tā teksts mainās, virzot peles kursoru virs tā:
Atšķirība starp textContent, innerText un innerHTML rekvizītiem?
Parasti ' teksta saturs ',' iekšējaisTeksts ', un ' innerHTML ” rekvizīti attiecas uz elementa vai mezgla tekstu tā iestatīšanas un iegūšanas veidā. Tomēr šīs īpašības atšķiras viena no otras, pamatojoties uz dažiem faktoriem. Šajā sadaļā ir izceltas galvenās atšķirības starp tiem visiem:
Noteikumi 'teksta saturs' 'iekšējais teksts' 'innerHTML' Atgriešanas veids Tas atgriež elementa tekstu, ieskaitot visus tā atvasinājumus (formatēšanas tagus), CSS slēpto tekstu un atstarpi. Tas neatgriež elementa HTML tagus. Tas atgriež atlasītā HTML elementa teksta saturu ar visiem tā atvasinājumiem (formatēšanas tagiem). Tas neatgriež atstarpi, CSS slēpto tekstu un HTML tagus, izņemot