I forskellige situationer skal programmører få HTML-elementet ved navn-attributten. Antag, at udvikleren ønsker at få adgang til en formularkontrol, såsom en alternativknap eller afkrydsningsfelt, for at læse eller manipulere dens værdi. Mere specifikt ' navn ”-attribut bruges til at gruppere relaterede formularkontroller, og det samme navn kan gives til mange kontroller, hvilket gør det muligt at få adgang til dem som en enkelt gruppe.
Dette indlæg vil illustrere metoderne til at hente et HTML-element efter navn i JavaScript.
Hvordan får man elementer efter navn i JavaScript?
I JavaScript kan du få adgang til et HTML-element ved hjælp af dets navneattribut ved hjælp af følgende foruddefinerede JavaScript-metoder:
-
- getElementsByName() metode
- querySelectorAll() Metode
Metode 1: Hent element efter navn ved hjælp af 'getElementsByName()'-metoden
For at få HTML-elementet efter navn, brug ' getElementsByName() ” metode. Denne metode giver en samling af elementer, der har den angivne navneattribut.
Syntaks
Følgende syntaks bruges til getElementsByName() metoden:
document.getElementsByName ( 'navn' )
Eksempel
For det første skal du oprette seks knapper. Fem af dem har en ' navn ' attribut, der bruges til at hente HTML-elementet ' knap ”. Vedhæft onclick-begivenheden med den sjette knap, der kalder ' anvendeStyle() ”-funktion til at style de fem knapper:
< knap navn = 'btn' > Knap knap >< knap navn = 'btn' > Knap knap >
< knap navn = 'btn' > Knap knap >
< knap navn = 'btn' > Knap knap >
< knap navn = 'btn' > Knap knap > < br >< br >
< knappen ved at klikke på = 'applyStyle()' > Klik her knap >
Definer en funktion ' anvendeStyle() ”, der vil udløse på knapklik og ændre baggrundsfarven på alle knapperne. For at gøre dette skal du først få alle ' knap ' elementer som en gruppe ved at kalde ' getElementsByName() ” metode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forHver ( btn = > {
btn.style.background = 'kadetblå' ;
} ) ;
}
Som du kan se i outputtet, mens du klikker på knappen, ændres baggrundsfarven på de fem knapper:
Metode 2: Hent element efter navn ved hjælp af metoden 'querySelectorAll()'.
Du kan også bruge ' querySelectorAll() ' metode til at hente elementer ved at bruge ' navn ”-attribut i JavaScript. Denne metode bruges til at hente alle elementer i et dokument, der matcher en specificeret vælger/attribut såsom CSS-klasse, id eller navn.
Syntaks
Den givne syntaks bruges til at få elementet ved navn ved hjælp af ' querySelectorAll()' metode:
document.querySelectorAll ( '[navn='n1']' ) ;
Eksempel
I det følgende eksempel vil vi kun ændre farven på de knapper, hvis navn er ' btn1 ”:
< div >< knapnavn = 'btn' > Knap knap >
< knapnavn = 'btn1' > Knap knap >
< knapnavn = 'btn' > Knap knap >
< knapnavn = 'btn1' > Knap knap >
< knapnavn = 'btn' > Knap knap > < br >< br >
< knap ved klik = 'applyStyle()' > Klik her knap >
div >
I den definerede funktion kalder vi først adgang til alle knapelementer, hvis navn er ' btn1 ” og anvend derefter styling på det:
const btns = document.querySelectorAll ( '[navn='btn1']' ) ;
btns.forHver ( btn = > {
btn.style.background = 'kadetblå' ;
} ) ;
}
Det givne output betyder, at kun to knapper har ændret deres baggrundsfarve, hvis navn er 'btn1':
Bemærk: Hvis du ønsker at få et enkelt element, anbefales det at bruge document.querySelector i stedet for document.querySelectorAll.
Konklusion
For at få eller hente et element ved navn, brug ' getElementsByName() ' eller den ' querySelectorAll() ' metoder. Den mest almindeligt og mest effektive metode til at få elementet ved navn er 'getElementsByName()' metoden. Dette indlæg illustrerede metoderne til at hente et HTML-element efter navn i JavaScript.