HTML-elementin tunnisteen nimen hakeminen JavaScriptin avulla

Html Elementin Tunnisteen Nimen Hakeminen Javascriptin Avulla



HTML-elementit ovat web-sivun olennaisia ​​osia, jotka määrittelevät sen rakenteen ja sisällön tagin nimen avulla. Tunnisteen nimi opastaa selainta tulkitsemaan sisältöä, kuten '

' kappaleessa, '

' ensimmäisen tason otsikossa jne. Tätä lähestymistapaa tarvitaan, kun käyttäjän on päästävä HTML-elementtiin sen tunnisteen nimellä suoraan useiden koodirivien etsimisen sijaan.

Tämä opas selittää täydellisen menettelyn HTML-elementin tunnisteen nimen hakemiseksi JavaScriptin avulla.

Kuinka noutaa HTML-elementin tunnistenimi JavaScriptin avulla?

JavaScript tarjoaa vain luku -ominaisuuden merkin nimi ”-ominaisuus, joka näyttää vastaavan HTML-elementin tagin nimen. Se palauttaa merkkijonon arvon, eli elementin tagin nimen isoilla kirjaimilla.







Syntaksi



elementti. merkin nimi

Yllä olevassa syntaksissa ' merkin nimi ' vastaa elementin tunnisteen nimiä, jotka on noudettava.



Siirrytään nyt sen käytännön toteutukseen ja tarkistetaan, kuinka sitä voidaan käyttää vastaavan HTML-elementin tunnisteen nimen hakemiseen.





Esimerkki: 'tagName'-ominaisuuden käyttäminen HTML-elementin tunnisteen nimen hakemiseen

Tässä esimerkissä kaikki HTML-koodissa määritetyt elementin tunnisteen nimet voidaan hakea ' merkin nimi ” omaisuutta.



HTML-koodi

Katsotaanpa seuraavaa HTML-koodia:

< kehon klikkaamalla = 'elementName()' >
< h2 > Hae JavaScriptin HTML-elementin tagName < / h2 >
< s > Napsauta mitä tahansa elementtiä tässä asiakirjassa saadaksesi sen tunnisteen nimen. < / s >
< -painiketta > Klikkaa sitä < / -painiketta >
< s id = 'demo' >< / s >

Yllä olevilla koodiriveillä:

  • ' ' -tunniste liittyy ' klikkaamalla 'tapahtuma uudelleenohjaa JavaScript-toimintoon' elemName() ', joka käynnistyy yhdellä napsautuksella.
  • '

    ” -tunniste määrittää alaotsikon.

  • '

    ' -tunniste luo kappalelausekkeen.

  • ' ' -tunniste lisää 'Click It'-nimisen painikkeen.
  • Lopuksi '

    ' -tunniste määrittelee tyhjän kappaleen, jolla on tunnus ' demo ' näyttääksesi HTML-elementtitunnisteen nimen 'onclick'-tapahtumatriggerissä.

JavaScript-koodi

Siirry seuraavaksi alla olevaan koodiin:

< käsikirjoitus >
toiminto elemName ( ) {
konst elementti = tapahtuma. kohde ;
asiakirja. getElementById ( 'demo' ) . innerHTML = 'Klikkatun HTML-elementin tagin nimi on:  ' + elementti. merkin nimi ;
}
käsikirjoitus >

Tässä koodilohkossa:

  • Määritä funktio nimeltä ' elemName() ”.
  • Ilmoita määritelmässään muuttuja ' elementti ' tietotyypin ' konst ', joka käyttää ' kohde ” -ominaisuus palauttaa elementin nimen, kun siihen liittyvä tapahtuma käynnistyy.
  • Käytä lopuksi ' getElementById() ' -menetelmää, jolla pääset lisättyyn kappaleeseen sen tunnuksella.
  • Se näyttää vastaavan HTML-elementin tagin nimen käyttämällä ' merkin nimi '-ominaisuutta, kun 'onclick'-tapahtuma käynnistyy.
  • Se on sellainen, että kun napsautat mitä tahansa HTML-koodin elementtiä, vastaava tagin nimi haetaan.

Lähtö

Tulos näyttää vastaavan elementtitunnisteen nimen, jossa onclick-tapahtuma käynnistyy vastaavasti.

Johtopäätös

JavaScript tarjoaa sisäänrakennetun ' merkin nimi ”-ominaisuus HTML-elementtitunnisteen nimen saamiseksi. Sitä käytetään yleensä JavaScript-tapahtumakäsittelijöiden, kuten 'onclick', 'onmouseover', 'ondblclick' jne. kanssa. Kun HTML-elementtiin liittyvä tapahtuma käynnistyy, se palauttaa tunnisteen nimen oletuksena SUURIN KIRJAIN. Tässä oppaassa on lyhyt kuvaus HTML-elementin tunnisteen nimen hakemisesta JavaScriptin avulla.