I olika situationer måste programmerare få HTML-elementet genom namnattributet. Anta att utvecklaren vill komma åt en formulärkontroll, som en alternativknapp eller kryssruta, för att läsa eller manipulera dess värde. Mer specifikt, ' namn ”-attribut används för att gruppera relaterade formulärkontroller och samma namn kan ges till många kontroller, vilket gör att de kan nås som en enda grupp.
Det här inlägget kommer att illustrera metoderna för att hämta ett HTML-element efter namn i JavaScript.
Hur får man element efter namn i JavaScript?
I JavaScript kan du komma åt ett HTML-element med hjälp av dess namnattribut med hjälp av följande fördefinierade JavaScript-metoder:
-
- getElementsByName() metod
- querySelectorAll() Metod
Metod 1: Hämta element efter namn med metoden 'getElementsByName()'.
För att få HTML-elementet efter namn, använd ' getElementsByName() 'metoden. Denna metod ger en samling element som har det angivna namnattributet.
Syntax
Följande syntax används för metoden getElementsByName():
document.getElementsByName ( 'namn' )
Exempel
Skapa först sex knappar. Fem av dem har en ' namn ' attribut som används för att hämta HTML-elementet ' knapp ”. Bifoga onclick-händelsen med den sjätte knappen som kommer att anropa ' appliceraStyle() ”-funktion för att utforma de fem knapparna:
< knapp namn = 'btn' > Knapp knapp >< knapp namn = 'btn' > Knapp knapp >
< knapp namn = 'btn' > Knapp knapp >
< knapp namn = 'btn' > Knapp knapp >
< knapp namn = 'btn' > Knapp knapp > < br >< br >
< knappen onclick = 'applyStyle()' > Klicka här knapp >
Definiera en funktion ' appliceraStyle() ” som kommer att utlösa på knappklicket och ändra bakgrundsfärgen på alla knappar. För att göra detta, först skaffa alla ' knapp ' element som en grupp genom att anropa ' getElementsByName() ' metod:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadettblå' ;
} ) ;
}
Som du kan se i utgången när du klickar på knappen kommer bakgrundsfärgen på de fem knapparna att ändras:
Metod 2: Hämta element efter namn med metoden 'querySelectorAll()'.
Du kan också använda ' querySelectorAll() '-metoden för att hämta element genom att använda ' namn ”-attribut i JavaScript. Denna metod används för att hämta alla element i ett dokument som matchar en specificerad väljare/attribut som CSS-klass, id eller namn.
Syntax
Den givna syntaxen används för att få elementet efter namn med hjälp av ' querySelectorAll()' metod:
document.querySelectorAll ( '[]' ) ;
Exempel
I följande exempel kommer vi att ändra färgen på endast de knappar vars namn är ' btn1 ”:
< div >< knappens namn = 'btn' > Knapp knapp >
< knappens namn = 'btn1' > Knapp knapp >
< knappens namn = 'btn' > Knapp knapp >
< knappens namn = 'btn1' > Knapp knapp >
< knappens namn = 'btn' > Knapp knapp > < br >< br >
< knappen onclick = 'applyStyle()' > Klicka här knapp >
div >
I den definierade funktionen anropar vi först åtkomst till alla knappelement vars namn är ' btn1 ” och applicera sedan styling på den:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadettblå' ;
} ) ;
}
Den givna utgången betyder att endast två knappar har ändrat sin bakgrundsfärg vars namn är 'btn1':
Notera: Om du vill få ett enstaka element, rekommenderas det att du använder document.querySelector istället för document.querySelectorAll.
Slutsats
För att hämta eller hämta ett element med namn, använd ' getElementsByName() ' eller den ' querySelectorAll() ' metoder. Den vanligaste och mest effektiva metoden för att få elementet efter namn är metoden 'getElementsByName()'. Det här inlägget illustrerade metoderna för att hämta ett HTML-element efter namn i JavaScript.