HTML-i elemendi sildinime toomine JavaScripti abil

Html I Elemendi Sildinime Toomine Javascripti Abil



HTML-elemendid on veebilehe olulised komponendid, mis määravad sildi nime abil nii selle struktuuri kui ka sisu. Märgendi nimi juhendab brauserit sisu tõlgendama, näiteks „

” lõigu jaoks, „

” esimese taseme pealkirja jaoks jne. Seda lähenemist on vaja siis, kui kasutajal on vaja juurdepääsu HTML-elemendile selle sildi nime järgi otse mitme koodirea otsimise asemel.

See juhend selgitab täielikku protseduuri HTML-elemendi sildinime toomiseks JavaScripti abil.

Kuidas tuua JavaScripti abil HTML-i elemendi sildi nimi?

JavaScript pakub kirjutuskaitstud ' tagName ” atribuut, mis kuvab vastava HTML-elemendi sildi nime. See tagastab stringi väärtuse, st elemendi sildi nime SUURTÄHEDAS.







Süntaks



element. tagName

Ülaltoodud süntaksis ' tagName ” vastab elemendi sildinimedele, mis tuleb tuua.



Liigume nüüd selle praktilise rakendamise juurde, et kontrollida, kuidas seda saab kasutada vastava HTML-elemendi sildinime toomiseks.





Näide: atribuudi „tagName” rakendamine HTML-i elemendi sildi nime toomiseks

Selles näites saab kõiki HTML-koodis määratud elementide sildinimesid hankida ' tagName ” vara.



HTML-kood

Vaatame järgmist HTML-koodi:

< keha onclick = 'elemName()' >
< h2 > Too JavaScriptis HTML-i elemendi siltNimi < / h2 >
< lk > Selle märgendi nime saamiseks klõpsake selle dokumendi mis tahes elemendil. < / lk >
< nuppu > Klõpsake seda < / nuppu >
< lk id = 'demo' >< / lk >

Ülaltoodud koodiridades:

  • ' märgend on seotud märgiga ' onclick 'sündmus, mis suunab ümber JavaScripti funktsioonile' elemName() ”, mis käivitub ühe klõpsuga.
  • '

    ” märgend määrab alampealkirja.

  • '

    ” silt loob lõigulause.

  • ' ” silt lisab nupu nimega „Click It”.
  • Lõpuks, '

    märgend määratleb tühja lõigu, millel on ID ' demo HTML-elemendi märgendi nime kuvamiseks sündmuse „onclick” päästikul.

JavaScripti kood

Järgmisena liikuge edasi alltoodud koodi juurde:

< stsenaarium >
funktsiooni elemName ( ) {
konst element = sündmus. sihtmärk ;
dokument. getElementById ( 'demo' ) . sisemine HTML = 'Klõpsatud HTML-i elemendi märgendi nimi on:  ' + element. tagName ;
}
stsenaarium >

Selles koodiplokis:

  • Määrake funktsioon nimega ' elemName() ”.
  • Selle määratluses deklareerige muutuja ' element ' andmetüübiga ' konst ', mis kasutab ' sihtmärk ” atribuut elemendi nime tagastamiseks, kui sellega seotud sündmus käivitub.
  • Lõpuks rakendage ' getElementById() ” meetod, et pääseda juurde lisatud lõigule selle ID abil.
  • Selle tulemusel kuvatakse vastava HTML-i elemendi sildi nimi, kasutades ' tagName ” atribuut, kui sündmus „onclick” käivitub.
  • See on selline, et klõpsates mis tahes HTML-koodi elemendil, hangitakse vastav sildi nimi.

Väljund

Väljund näitab vastava elemendi märgendi nime, kus sündmus 'onclick' käivitub vastavalt.

Järeldus

JavaScript pakub sisseehitatud ' tagName ” atribuut HTML-elemendi märgendi nime saamiseks. Tavaliselt kasutatakse seda JavaScripti sündmuste töötlejatega, nagu „onclick”, „onmouseover”, „ondblclick” jne. Kui HTML-elemendiga seotud sündmus käivitub, tagastab see vaikimisi oma märgendi nime SUURTÄHEDAS. See juhend kirjeldab lühidalt, kuidas tuua JavaScripti abil HTML-elemendi sildi nimi.