Įvairiose situacijose programuotojai turi gauti HTML elementą pagal pavadinimo atributą. Tarkime, kad kūrėjas nori pasiekti formos valdiklį, pvz., akutę arba žymimąjį laukelį, kad galėtų perskaityti arba manipuliuoti jo verte. Tiksliau, „ vardas “ atributas naudojamas sugrupuoti susijusius formos valdiklius, o tas pats pavadinimas gali būti suteiktas daugeliui valdiklių, todėl juos galima pasiekti kaip vieną grupę.
Šis įrašas parodys būdus, kaip gauti HTML elementą pagal pavadinimą „JavaScript“.
Kaip gauti elementus pagal pavadinimą „JavaScript“?
„JavaScript“ galite pasiekti HTML elementą naudodami pavadinimo atributą, naudodami šiuos iš anksto nustatytus „JavaScript“ metodus:
-
- getElementsByName() metodas
- querySelectorAll() metodas
1 būdas: gaukite elementą pagal pavadinimą naudodami metodą „getElementsByName()“
Norėdami gauti HTML elementą pagal pavadinimą, naudokite „ getElementsByName() “ metodas. Šis metodas suteikia elementų, turinčių nurodytą pavadinimo atributą, rinkinį.
Sintaksė
Metodui getElementsByName() naudojama ši sintaksė:
document.getElementsByName ( 'vardas' )
Pavyzdys
Pirmiausia sukurkite šešis mygtukus. Penki iš jų turi „ vardas 'atributas, naudojamas HTML elementui gauti' mygtuką “. Pridėkite onclick įvykį šeštuoju mygtuku, kuris iškvies „ taikyti stilius () “ funkcija penkių mygtukų stiliui nustatyti:
< mygtuką vardas = 'btn' > Mygtukas mygtuką >< mygtuką vardas = 'btn' > Mygtukas mygtuką >
< mygtuką vardas = 'btn' > Mygtukas mygtuką >
< mygtuką vardas = 'btn' > Mygtukas mygtuką >
< mygtuką vardas = 'btn' > Mygtukas mygtuką > < br >< br >
< mygtukas onclick = 'applyStyle()' > Paspauskite čia mygtuką >
Apibrėžkite funkciją ' taikyti stilius () “, kuris suaktyvins mygtuko paspaudimą ir pakeis visų mygtukų fono spalvą. Norėdami tai padaryti, pirmiausia gaukite visus mygtuką “ elementus kaip grupę, skambindami „ getElementsByName() “ metodas:
const btns = document.getElementsByName ( 'btn' ) ;
btns.Kiekvienam ( btn = > {
btn.style.background = 'kadetų mėlyna' ;
} ) ;
}
Kaip matote išvestyje, kai spustelėsite mygtuką, penkių mygtukų fono spalva bus pakeista:
2 būdas: gaukite elementą pagal pavadinimą naudodami „querySelectorAll()“ metodą
Taip pat galite naudoti „ querySelectorAll() ' metodas elementams gauti naudojant ' vardas “ atributas „JavaScript“. Šis metodas naudojamas norint gauti visus dokumento elementus, kurie atitinka nurodytą parinkiklį / atributą, pvz., CSS klasę, ID arba pavadinimą.
Sintaksė
Nurodyta sintaksė naudojama norint gauti elementą pagal pavadinimą naudojant ' querySelectorAll()“ metodas:
document.querySelectorAll ( „[] ) ;
Pavyzdys
Šiame pavyzdyje pakeisime tik tų mygtukų, kurių pavadinimas yra ' btn1 “:
< div >< mygtuko pavadinimas = 'btn' > Mygtukas mygtuką >
< mygtuko pavadinimas = 'btn1' > Mygtukas mygtuką >
< mygtuko pavadinimas = 'btn' > Mygtukas mygtuką >
< mygtuko pavadinimas = 'btn1' > Mygtukas mygtuką >
< mygtuko pavadinimas = 'btn' > Mygtukas mygtuką > < br >< br >
< mygtukas onclick = 'applyStyle()' > Paspauskite čia mygtuką >
div >
Apibrėžtoje funkcijoje pirmiausia iškviesime prieigą prie visų mygtukų elementų, kurių pavadinimas yra ' btn1 “, tada pritaikykite stilių:
const btns = document.querySelectorAll ( '[]' ) ;
btns.Kiekvienam ( btn = > {
btn.style.background = 'kadetų mėlyna' ;
} ) ;
}
Pateikta išvestis reiškia, kad tik du mygtukai pakeitė fono spalvą, kurių pavadinimas yra „btn1“:
Pastaba: Jei norite gauti vieną elementą, vietoje document.querySelectorAll rekomenduojama naudoti document.querySelector.
Išvada
Norėdami gauti arba nuskaityti elementą pagal pavadinimą, naudokite „ getElementsByName() ' arba ' querySelectorAll() “ metodai. Dažniausiai ir efektyviausiai naudojamas metodas elementui gauti pagal pavadinimą yra metodas „getElementsByName()“. Šis įrašas iliustruoja būdus, kaip gauti HTML elementą pagal pavadinimą „JavaScript“.