Eri tilanteissa ohjelmoijien on hankittava HTML-elementti name-attribuutilla. Oletetaan, että kehittäjä haluaa käyttää lomakkeen ohjausobjektia, kuten valintanappia tai valintaruutua, lukeakseen tai muokatakseen sen arvoa. Tarkemmin sanottuna ' nimi ” -attribuuttia käytetään ryhmittelemään liittyviä lomakeohjausobjekteja, ja sama nimi voidaan antaa useille ohjausobjekteille, jolloin niitä voidaan käyttää yhtenä ryhmänä.
Tämä viesti havainnollistaa tapoja noutaa HTML-elementti nimellä JavaScriptissä.
Kuinka saada elementtejä nimen mukaan JavaScriptissä?
JavaScriptissä voit käyttää HTML-elementtiä sen name-attribuutin avulla seuraavien ennalta määritettyjen JavaScript-menetelmien avulla:
-
- getElementsByName() -menetelmä
- querySelectorAll() -menetelmä
Tapa 1: Hanki elementti nimen mukaan käyttämällä 'getElementsByName()' -menetelmää
Saadaksesi HTML-elementin nimellä, käytä ' getElementsByName() ”menetelmä. Tämä menetelmä antaa kokoelman elementtejä, joilla on määritetty name-attribuutti.
Syntaksi
GetElementsByName()-menetelmässä käytetään seuraavaa syntaksia:
document.getElementsByName ( 'nimi' )
Esimerkki
Luo ensin kuusi painiketta. Viidellä heistä on ' nimi ' attribuutti, jota käytetään HTML-elementin saamiseksi' -painiketta ”. Liitä onclick-tapahtuma kuudennelle painikkeelle, joka kutsuu ' applyStyle() ”-toiminto viiden painikkeen tyyliin:
< -painiketta nimi = 'btn' > Painike -painiketta >< -painiketta nimi = 'btn' > Painike -painiketta >
< -painiketta nimi = 'btn' > Painike -painiketta >
< -painiketta nimi = 'btn' > Painike -painiketta >
< -painiketta nimi = 'btn' > Painike -painiketta > < br >< br >
< painike onclick = 'applyStyle()' > Klikkaa tästä -painiketta >
Määritä funktio ' applyStyle() ', joka laukaisee painikkeen napsautuksen ja muuttaa kaikkien painikkeiden taustavärin. Voit tehdä tämän hankkimalla ensin kaikki ' -painiketta '-elementtejä ryhmänä kutsumalla ' getElementsByName() 'menetelmä:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadetinsininen' ;
} ) ;
}
Kuten näet tulosteesta napsauttaessasi painiketta, viiden painikkeen taustaväri muuttuu:
Tapa 2: Hanki elementti nimen mukaan käyttämällä 'querySelectorAll()' -menetelmää
Voit myös käyttää ' querySelectorAll() ' menetelmä elementtien saamiseksi käyttämällä ' nimi ”-attribuutti JavaScriptissä. Tätä menetelmää käytetään hakemaan kaikki asiakirjan elementit, jotka vastaavat määritettyä valitsinta/attribuuttia, kuten CSS-luokka, tunnus tai nimi.
Syntaksi
Annettua syntaksia käytetään elementin hankkimiseen nimellä ' querySelectorAll()' menetelmä:
document.querySelectorAll ( '[]' ) ;
Esimerkki
Seuraavassa esimerkissä muutamme vain niiden painikkeiden väriä, joiden nimi on ' btn1 ”:
< div >< painikkeen nimi = 'btn' > Painike -painiketta >
< painikkeen nimi = 'btn1' > Painike -painiketta >
< painikkeen nimi = 'btn' > Painike -painiketta >
< painikkeen nimi = 'btn1' > Painike -painiketta >
< painikkeen nimi = 'btn' > Painike -painiketta > < br >< br >
< painike onclick = 'applyStyle()' > Klikkaa tästä -painiketta >
div >
Määritetyssä funktiossa kutsumme ensin pääsyn kaikkiin painikeelementteihin, joiden nimi on ' btn1 ” ja käytä sitten muotoilua siihen:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadetinsininen' ;
} ) ;
}
Annettu tulos tarkoittaa, että vain kaksi painiketta on vaihtanut taustavärinsä, joiden nimi on 'btn1':
Huomautus: Jos haluat saada yhden elementin, on suositeltavaa käyttää document.querySelectoria document.querySelectorAll-tiedoston sijaan.
Johtopäätös
Jos haluat saada tai noutaa elementin nimellä, käytä ' getElementsByName() ' tai ' querySelectorAll() ”menetelmiä. Yleisimmin ja tehokkaimmin käytetty menetelmä elementin hankkimiseksi nimellä on 'getElementsByName()' -menetelmä. Tämä viesti havainnollistaa tapoja noutaa HTML-elementti nimellä JavaScriptissä.