JavaScript Få element ved navn - HTML
I forskjellige situasjoner trenger programmerere å få HTML -elementet etter navnet. Anta at utvikleren ønsker å få tilgang til en skjemakontroll, som en alternativknapp eller avkrysningsrute, for å lese eller manipulere verdien. Mer spesifikt, “Navn”Attributt brukes til å gruppere formkontroller, og samme navn kan gis til mange kontroller, slik at de kan få tilgang til som en enkelt gruppe.
Dette innlegget vil illustrere metodene for å hente et HTML -element ved navn i JavaScript.
Hvordan få elementer ved navn i JavaScript?
I JavaScript kan du få tilgang til et HTML -element ved å bruke navnattributtet ved hjelp av følgende forhåndsdefinerte JavaScript -metoder:
-
- getElementsByName () -metode
- querySelectorAll () -metode
Metode 1: Få element ved navn ved hjelp av metoden “getElementSyName ()”
For å få HTML -elementet ved navn, bruk "getElementsByName ()”Metode. Denne metoden gir en samling av elementer som har det spesifiserte navnattributtet.
Syntaks
Følgende syntaks brukes til getElementsByName () -metoden:
dokument.getElementsByName (“Navn”)
Eksempel
For det første, lage seks knapper. Fem av dem har en “Navn”Attributt som brukes til å få HTML -elementet”knapp”. Fest OnClick -hendelsen med den sjette knappen som vil kalle “ApplyStyle ()”Funksjon for å style de fem knappene:
Definere en funksjon “ApplyStyle ()”Det vil utløse på knappen klikke og endre bakgrunnsfargen på alle knappene. For å gjøre dette, først, få alle “knapp”Elementer som en gruppe ved å kalle“getElementsByName ()”Metode:
funksjon ApplyStyle ()
const btns = dokument.getElementsByname ("Btn");
btns.foreach (btn =>
btn.stil.bakgrunn = "CadetBlue";
);
Som du kan se i utdataene mens du klikker på knappen, vil bakgrunnsfargen på de fem knappene bli endret:
Metode 2: Få element ved navn ved å bruke "queryStectorAll ()" -metode
Du kan også bruke "QuerySelectorAll ()”Metode for å få 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 syntaks brukes for å få elementet ved navn ved å bruke "QuerySelectorAll () ” metode:
dokument.querySelectorAll ('[name = "n1"]');
Eksempel
I det følgende eksemplet vil vi endre fargen på bare de knappene hvis navn er "BTN1”:
I den definerte funksjonen vil vi kalle først tilgang til alle knappelementene hvis navn er "BTN1”Og bruk deretter styling på den:
funksjon ApplyStyle ()
const btns = dokument.querySelectorAll ('[name = "btn1"]');
btns.foreach (btn =>
btn.stil.bakgrunn = "CadetBlue";
);
Den gitte utgangen betyr at bare to knapper har endret bakgrunnsfarge hvis navn er “BTN1”:
Merk: Hvis du vil få et enkelt element, anbefales det å bruke dokument.QuerySelector i stedet for dokumentet.QuerySelectorAll.
Konklusjon
For å få eller hente et element ved navn, bruk "getElementsByName ()" eller "QuerySelectorAll ()”Metoder. Den mest og effektivt benyttede metoden for å få elementet ved navn er metoden “getElementsByName ()”. Dette innlegget illustrerte metodene for å hente et HTML -element ved navn i JavaScript.