Erinevates olukordades peavad programmeerijad hankima HTML-elemendi atribuudi name abil. Oletame, et arendaja soovib pääseda juurde vormi juhtelemendile, näiteks raadionupule või märkeruudule, et selle väärtust lugeda või sellega manipuleerida. Täpsemalt öeldes ' nimi ” atribuuti kasutatakse seotud vormi juhtelementide rühmitamiseks ja sama nime saab anda paljudele juhtelementidele, võimaldades neile juurdepääsu ühe rühmana.
See postitus illustreerib meetodeid HTML-i elemendi toomiseks nime järgi JavaScriptis.
Kuidas saada JavaScriptis elemente nime järgi?
JavaScriptis pääsete HTML-elemendile juurde, kasutades selle atribuuti name, kasutades järgmisi eelmääratletud JavaScripti meetodeid:
-
- getElementsByName() meetod
- querySelectorAll() meetod
1. meetod: hankige element nime järgi, kasutades meetodit 'getElementsByName()'
HTML-i elemendi nime järgi hankimiseks kasutage ' getElementsByName() ” meetod. See meetod annab elementide kogumi, millel on määratud nimeatribuut.
Süntaks
Meetodi getElementsByName() jaoks kasutatakse järgmist süntaksit:
document.getElementsByName ( 'nimi' )
Näide
Esiteks looge kuus nuppu. Viiel neist on ' nimi ' atribuut, mida kasutatakse HTML-i elemendi hankimiseks ' nuppu ”. Manustage onclick sündmus kuuenda nupuga, mis kutsub esile rakendusstiil() ” funktsioon viie nupu stiili kujundamiseks:
< nuppu nimi = 'btn' > Nupp nuppu >< nuppu nimi = 'btn' > Nupp nuppu >
< nuppu nimi = 'btn' > Nupp nuppu >
< nuppu nimi = 'btn' > Nupp nuppu >
< nuppu nimi = 'btn' > Nupp nuppu > < br >< br >
< nupp onclick = 'applyStyle()' > Kliki siia nuppu >
Määratlege funktsioon ' rakendusstiil() ”, mis käivitab nupuklõpsu ja muudab kõigi nuppude taustavärvi. Selleks hankige esmalt kõik ' nuppu ' elemente rühmana, kutsudes ' getElementsByName() ” meetod:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadettsinine' ;
} ) ;
}
Nagu näete nupul klõpsates väljundis, muudetakse viie nupu taustavärvi:
2. meetod: hankige element nime järgi, kasutades meetodit 'querySelectorAll()'.
Võite kasutada ka ' querySelectorAll() ' meetod elementide hankimiseks, kasutades ' nimi ” atribuut JavaScriptis. Seda meetodit kasutatakse kõigi dokumendi elementide hankimiseks, mis vastavad määratud valijale/atribuudile, nagu CSS-klass, ID või nimi.
Süntaks
Antud süntaksit kasutatakse elemendi hankimiseks nime järgi kasutades ' querySelectorAll()” meetod:
document.querySelectorAll ( '[]' ) ;
Näide
Järgmises näites muudame ainult nende nuppude värvi, mille nimi on ' btn1 ”:
< div >< nupu nimi = 'btn' > Nupp nuppu >
< nupu nimi = 'btn1' > Nupp nuppu >
< nupu nimi = 'btn' > Nupp nuppu >
< nupu nimi = 'btn1' > Nupp nuppu >
< nupu nimi = 'btn' > Nupp nuppu > < br >< br >
< nupp onclick = 'applyStyle()' > Kliki siia nuppu >
div >
Määratletud funktsioonis kutsume kõigepealt välja kõik nupuelemendid, mille nimi on ' btn1 ” ja seejärel rakendage sellele stiil:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadettsinine' ;
} ) ;
}
Antud väljund tähendab, et ainult kaks nuppu on muutnud oma taustavärvi, mille nimi on 'btn1':
Märge: Kui soovite saada ühte elementi, on soovitatav dokumendi document.querySelectorAll asemel kasutada faili document.querySelector.
Järeldus
Elemendi hankimiseks või toomiseks nime järgi kasutage ' getElementsByName() ” või „ querySelectorAll() ” meetodid. Kõige sagedamini ja tõhusamalt kasutatav meetod elemendi nime järgi hankimiseks on meetod 'getElementsByName()'. See postitus illustreeris meetodeid HTML-i elemendi nime järgi toomiseks JavaScriptis.