In verschillende situaties moeten programmeurs het HTML-element verkrijgen via het naamkenmerk. Stel dat de ontwikkelaar toegang wil hebben tot een formulierbesturingselement, zoals een keuzerondje of selectievakje, om de waarde ervan te lezen of te manipuleren. Meer specifiek, de “ naam Het attribuut wordt gebruikt om gerelateerde formulierbesturingselementen te groeperen en dezelfde naam kan aan veel besturingselementen worden gegeven, waardoor ze als een enkele groep toegankelijk zijn.
Dit bericht illustreert de methoden om een HTML-element op naam op te halen in JavaScript.
Hoe elementen op naam in JavaScript te krijgen?
In JavaScript hebt u toegang tot een HTML-element met behulp van het naamkenmerk met behulp van de volgende vooraf gedefinieerde JavaScript-methoden:
-
- getElementsByName()-methode
- querySelectorAll()-methode
Methode 1: Element op naam ophalen met behulp van de methode 'getElementsByName()'.
Om het HTML-element op naam te krijgen, gebruikt u de ' getElementsByName() ” methode. Deze methode geeft een verzameling elementen die het gespecificeerde naamattribuut hebben.
Syntaxis
De volgende syntaxis wordt gebruikt voor de getElementsByName() methode:
document.getElementsByName ( 'naam' )
Voorbeeld
Maak eerst zes knoppen. Vijf van hen hebben een naam ” attribuut dat wordt gebruikt om het HTML-element te krijgen “ knop ”. Voeg de onclick-gebeurtenis toe aan de zesde knop die de ' toepassenStijl() ”-functie om de vijf knoppen te stylen:
< knop naam = 'btn' > Knop knop >< knop naam = 'btn' > Knop knop >
< knop naam = 'btn' > Knop knop >
< knop naam = 'btn' > Knop knop >
< knop naam = 'btn' > Knop knop > < br >< br >
< knop onclick = 'applyStyle()' > Klik hier knop >
Definieer een functie “ toepassenStijl() ” dat zal activeren bij het klikken op de knop en de achtergrondkleur van alle knoppen zal veranderen. Om dit te doen, moet u eerst alle ' knop ” elementen als een groep door de “ getElementsByName() ” methode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forElk ( btn = > {
btn.stijl.achtergrond = 'cadetblauw' ;
} ) ;
}
Zoals je kunt zien in de uitvoer terwijl je op de knop klikt, verandert de achtergrondkleur van de vijf knoppen:
Methode 2: Element op naam ophalen met de methode 'querySelectorAll()'.
U kunt ook gebruik maken van de “ querySelectorAll() ” methode om elementen te krijgen met behulp van de “ naam ” attribuut in JavaScript. Deze methode wordt gebruikt om alle elementen in een document op te halen die overeenkomen met een opgegeven selector/attribuut, zoals CSS-klasse, id of naam.
Syntaxis
De gegeven syntaxis wordt gebruikt om het element op naam te krijgen met behulp van de ' querySelectorAll()” methode:
document.querySelectorAll ( '[naam='n1']' ) ;
Voorbeeld
In het volgende voorbeeld veranderen we alleen de kleur van die knoppen waarvan de naam ' btn1 ”:
< div >< knop naam = 'btn' > Knop knop >
< knop naam = 'btn1' > Knop knop >
< knop naam = 'btn' > Knop knop >
< knop naam = 'btn1' > Knop knop >
< knop naam = 'btn' > Knop knop > < br >< br >
< knop onclick = 'applyStyle()' > Klik hier knop >
div >
In de gedefinieerde functie bellen we eerst toegang tot alle knopelementen waarvan de naam ' btn1 ” en pas er dan styling op toe:
const btns = document.querySelectorAll ( '[naam='btn1']' ) ;
btns.forElk ( btn = > {
btn.stijl.achtergrond = 'cadetblauw' ;
} ) ;
}
De gegeven uitvoer geeft aan dat slechts twee knoppen hun achtergrondkleur hebben gewijzigd, waarvan de naam 'btn1' is:
Opmerking: Als u een enkel element wilt, is het raadzaam om document.querySelector te gebruiken in plaats van document.querySelectorAll.
Conclusie
Gebruik de ' getElementsByName() ' of de ' querySelectorAll() ” methoden. De meest gebruikelijke en efficiënt gebruikte methode om het element op naam te krijgen, is de methode 'getElementsByName()'. Dit bericht illustreerde de methoden om een HTML-element op naam op te halen in JavaScript.