U raznim situacijama, programeri moraju dobiti HTML element pomoću atributa name. Pretpostavimo da programer želi pristupiti kontroli obrasca, poput radio gumba ili potvrdnog okvira, kako bi pročitao ili manipulirao njezinom vrijednošću. Konkretnije, ' Ime ” atribut se koristi za grupiranje povezanih kontrola obrasca, a isto ime može se dati mnogim kontrolama, omogućujući da im se pristupa kao jednoj grupi.
Ovaj post će ilustrirati metode za dohvaćanje HTML elementa po imenu u JavaScriptu.
Kako dobiti elemente po imenu u JavaScriptu?
U JavaScriptu možete pristupiti HTML elementu pomoću njegovog atributa imena uz pomoć sljedećih unaprijed definiranih JavaScript metoda:
-
- getElementsByName() metoda
- querySelectorAll() Metoda
Metoda 1: Dohvaćanje elementa prema nazivu pomoću metode 'getElementsByName()'.
Da biste dobili HTML element po imenu, koristite ' getElementsByName() ” metoda. Ova metoda daje kolekciju elemenata koji imaju navedeni atribut imena.
Sintaksa
Za metodu getElementsByName() koristi se sljedeća sintaksa:
document.getElementsByName ( 'Ime' )
Primjer
Najprije izradite šest gumba. Pet ih ima ' Ime ' atribut koji se koristi za dobivanje HTML elementa ' dugme ”. Priložite događaj onclick sa šestim gumbom koji će pozvati ' primijeniStil() ” za stiliziranje pet gumba:
< dugme Ime = 'btn' > Dugme dugme >< dugme Ime = 'btn' > Dugme dugme >
< dugme Ime = 'btn' > Dugme dugme >
< dugme Ime = 'btn' > Dugme dugme >
< dugme Ime = 'btn' > Dugme dugme > < br >< br >
< gumb na klik = 'primijeniStil()' > Kliknite ovdje dugme >
Definirajte funkciju ' primijeniStil() ” koja će se pokrenuti na klik gumba i promijeniti boju pozadine svih gumba. Da biste to učinili, prvo nabavite sve ' dugme ' kao grupu pozivanjem ' getElementsByName() ” metoda:
const btns = document.getElementsByName ( 'btn' ) ;
btns.zaSvakog ( btn = > {
btn.style.background = 'kadetplava' ;
} ) ;
}
Kao što možete vidjeti u izlazu dok kliknete na gumb, boja pozadine pet gumba će se promijeniti:
Metoda 2: Dohvaćanje elementa prema nazivu pomoću metode “querySelectorAll()”.
Također možete koristiti ' querySelectorAll() ' metoda za dobivanje elemenata korištenjem ' Ime ” atribut u JavaScriptu. Ova se metoda koristi za dohvaćanje svih elemenata u dokumentu koji odgovaraju određenom selektoru/atributu kao što je CSS klasa, ID ili naziv.
Sintaksa
Dana sintaksa koristi se za dobivanje elementa po imenu pomoću ' querySelectorAll()” metoda:
document.querySelectorAll ( '[]' ) ;
Primjer
U sljedećem primjeru promijenit ćemo boju samo onih gumba čije je ime ' btn1 ”:
< div >< naziv gumba = 'btn' > Dugme dugme >
< naziv gumba = 'btn1' > Dugme dugme >
< naziv gumba = 'btn' > Dugme dugme >
< naziv gumba = 'btn1' > Dugme dugme >
< naziv gumba = 'btn' > Dugme dugme > < br >< br >
< gumb na klik = 'primijeniStil()' > Kliknite ovdje dugme >
div >
U definiranoj funkciji ćemo pozvati prvi pristup svim elementima gumba čije je ime “ btn1 ”, a zatim primijenite stil na njega:
const btns = document.querySelectorAll ( '[]' ) ;
btns.zaSvakog ( btn = > {
btn.style.background = 'kadetplava' ;
} ) ;
}
Dani izlaz znači da su samo dva gumba promijenila svoju boju pozadine čije je ime 'btn1':
Bilješka: Ako želite dobiti jedan element, preporuča se koristiti document.querySelector umjesto document.querySelectorAll.
Zaključak
Za dobivanje ili dohvaćanje elementa po imenu, koristite ' getElementsByName() ' ili ' querySelectorAll() ” metode. Najčešće i najučinkovitije korištena metoda za dobivanje naziva elementa je metoda 'getElementsByName()'. Ovaj post ilustrira metode za dohvaćanje HTML elementa po imenu u JavaScriptu.