V različnih situacijah morajo programerji pridobiti element HTML z atributom imena. Recimo, da želi razvijalec dostopati do kontrolnika obrazca, kot je izbirni gumb ali potrditveno polje, da bi prebral ali spremenil njegovo vrednost. Natančneje, ' ime Atribut ” se uporablja za združevanje povezanih kontrolnikov obrazcev, isto ime pa je mogoče zagotoviti številnim kontrolnikom, kar omogoča dostop do njih kot ene same skupine.
Ta objava bo ponazorila metode za pridobivanje elementa HTML po imenu v JavaScriptu.
Kako pridobiti elemente po imenu v JavaScriptu?
V JavaScriptu lahko do elementa HTML dostopate z njegovim atributom imena s pomočjo naslednjih vnaprej določenih metod JavaScript:
-
- metoda getElementsByName().
- metoda querySelectorAll().
1. način: Pridobite element po imenu z metodo »getElementsByName()«.
Če želite element HTML pridobiti po imenu, uporabite » getElementsByName() ” metoda. Ta metoda daje zbirko elementov, ki imajo podani atribut imena.
Sintaksa
Za metodo getElementsByName() se uporablja naslednja sintaksa:
document.getElementsByName ( 'ime' )
Primer
Najprej ustvarite šest gumbov. Pet jih ima ' ime ' atribut, ki se uporablja za pridobitev elementa HTML ' gumb ”. Pripnite dogodek onclick s šestim gumbom, ki bo poklical » applyStyle() ” za oblikovanje petih gumbov:
< gumb ime = 'btn' > Gumb gumb >< gumb ime = 'btn' > Gumb gumb >
< gumb ime = 'btn' > Gumb gumb >
< gumb ime = 'btn' > Gumb gumb >
< gumb ime = 'btn' > Gumb gumb > < št >< št >
< gumb na klik = 'applyStyle()' > Klikni tukaj gumb >
Določite funkcijo ' applyStyle() «, ki se sproži ob kliku gumba in spremeni barvo ozadja vseh gumbov. Če želite to narediti, najprej pridobite vse » gumb ' kot skupino, tako da pokličete ' getElementsByName() ” metoda:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Kot lahko vidite v izpisu, medtem ko kliknete na gumb, bo barva ozadja petih gumbov spremenjena:
2. način: Pridobite element po imenu z metodo »querySelectorAll()«.
Uporabite lahko tudi » querySelectorAll() ' za pridobivanje elementov z uporabo ' ime ” v JavaScriptu. Ta metoda se uporablja za pridobivanje vseh elementov v dokumentu, ki se ujemajo z določenim izbirnikom/atributom, kot je razred CSS, id ali ime.
Sintaksa
Dana sintaksa se uporablja za pridobivanje elementa po imenu z uporabo ' querySelectorAll()' metoda:
document.querySelectorAll ( '[]' ) ;
Primer
V naslednjem primeru bomo spremenili barvo samo tistih gumbov, katerih ime je ' btn1 ”:
< div >< ime gumba = 'btn' > Gumb gumb >
< ime gumba = 'btn1' > Gumb gumb >
< ime gumba = 'btn' > Gumb gumb >
< ime gumba = 'btn1' > Gumb gumb >
< ime gumba = 'btn' > Gumb gumb > < št >< št >
< gumb na klik = 'applyStyle()' > Klikni tukaj gumb >
div >
V definirani funkciji bomo poklicali prvi dostop do vseh elementov gumbov, katerih ime je “ btn1 « in nato nanjo nanesite slog:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Podani izhod pomeni, da sta samo dva gumba spremenila barvo ozadja z imenom 'btn1':
Opomba: Če želite pridobiti en element, je priporočljivo, da uporabite document.querySelector namesto document.querySelectorAll.
Zaključek
Za pridobivanje ali pridobivanje elementa po imenu uporabite » getElementsByName() ' ali ' querySelectorAll() ” metode. Najpogosteje in učinkovito uporabljena metoda za pridobivanje elementa po imenu je metoda 'getElementsByName()'. Ta objava je ponazorila metode za pridobivanje elementa HTML po imenu v JavaScriptu.