I ulike situasjoner må programmerere få HTML-elementet ved navn-attributtet. Anta at utvikleren ønsker å få tilgang til en skjemakontroll, som en alternativknapp eller avmerkingsboks, for å lese eller manipulere verdien. Mer spesifikt, ' Navn ”-attributtet brukes til å gruppere relaterte skjemakontroller, og det samme navnet kan gis til mange kontroller, slik at de kan nås som en enkelt gruppe.
Dette innlegget vil illustrere metodene for å hente et HTML-element etter navn i JavaScript.
Hvordan få elementer etter navn i JavaScript?
I JavaScript kan du få tilgang til et HTML-element ved å bruke navneattributtet ved hjelp av følgende forhåndsdefinerte JavaScript-metoder:
-
- getElementsByName() metode
- querySelectorAll() Metode
Metode 1: Hent element etter navn ved å bruke 'getElementsByName()'-metoden
For å få HTML-elementet etter navn, bruk ' getElementsByName() 'metoden. Denne metoden gir en samling av elementer som har det angitte navneattributtet.
Syntaks
Følgende syntaks brukes for getElementsByName()-metoden:
document.getElementsByName ( 'Navn' )
Eksempel
Lag først seks knapper. Fem av dem har en ' Navn ' attributt som brukes til å hente HTML-elementet ' knapp '. Fest onclick-hendelsen med den sjette knappen som vil kalle ' anvendeStyle() '-funksjon for å style de fem knappene:
< knapp Navn = 'btn' > Knapp knapp >< knapp Navn = 'btn' > Knapp knapp >
< knapp Navn = 'btn' > Knapp knapp >
< knapp Navn = 'btn' > Knapp knapp >
< knapp Navn = 'btn' > Knapp knapp > < br >< br >
< knappen ved å klikke = 'applyStyle()' > Klikk her knapp >
Definer en funksjon ' anvendeStyle() ” som vil utløse ved knappeklikk og endre bakgrunnsfargen til alle knappene. For å gjøre dette må du først få alle ' knapp ' elementer som en gruppe ved å kalle ' getElementsByName() ' metode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadettblå' ;
} ) ;
}
Som du kan se i utdataene mens du klikker på knappen, vil bakgrunnsfargen til de fem knappene endres:
Metode 2: Hent element etter navn ved å bruke 'querySelectorAll()'-metoden
Du kan også bruke ' querySelectorAll() ' metode for å hente elementer ved å bruke ' Navn ”-attributt i JavaScript. Denne metoden brukes til å hente alle elementer i et dokument som samsvarer med en spesifisert velger/attributt som CSS-klasse, id eller navn.
Syntaks
Den gitte syntaksen brukes for å få elementet etter navn ved å bruke ' querySelectorAll()' metode:
document.querySelectorAll ( '[]' ) ;
Eksempel
I det følgende eksempelet vil vi endre fargen på bare de knappene hvis navn er ' btn1 ':
< div >< knappen navn = 'btn' > Knapp knapp >
< knappen navn = 'btn1' > Knapp knapp >
< knappen navn = 'btn' > Knapp knapp >
< knappen navn = 'btn1' > Knapp knapp >
< knappen navn = 'btn' > Knapp knapp > < br >< br >
< knappen ved å klikke = 'applyStyle()' > Klikk her knapp >
div >
I den definerte funksjonen kaller vi først tilgang til alle knappeelementene hvis navn er ' btn1 ' og bruk deretter styling på den:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadettblå' ;
} ) ;
}
Den gitte utgangen betyr at bare to knapper har endret bakgrunnsfargen hvis navn er 'btn1':
Merk: Hvis du ønsker å få et enkelt element, anbefales det å bruke document.querySelector i stedet for document.querySelectorAll.
Konklusjon
For å hente eller hente et element ved navn, bruk ' getElementsByName() ' eller ' querySelectorAll() 'metoder. Den mest brukte og mest effektive metoden for å få elementet ved navn er 'getElementsByName()'-metoden. Dette innlegget illustrerte metodene for å hente et HTML-element etter navn i JavaScript.