W różnych sytuacjach programiści muszą pobrać element HTML za pomocą atrybutu name. Załóżmy, że programista chce uzyskać dostęp do kontrolki formularza, takiej jak przycisk radiowy lub pole wyboru, w celu odczytania lub manipulowania jej wartością. Dokładniej, „ nazwa Atrybut ” służy do grupowania powiązanych kontrolek formularzy, a tę samą nazwę można nadać wielu kontrolkom, umożliwiając dostęp do nich jako jednej grupy.
Ten post zilustruje metody pobierania elementu HTML według nazwy w JavaScript.
Jak uzyskać elementy według nazwy w JavaScript?
W języku JavaScript można uzyskać dostęp do elementu HTML za pomocą jego atrybutu nazwy za pomocą następujących predefiniowanych metod JavaScript:
-
- getElementsByName() Metoda
- querySelectorAll() Metoda
Metoda 1: Uzyskaj element według nazwy przy użyciu metody „getElementsByName()”.
Aby uzyskać element HTML według nazwy, użyj „ getElementsByName() ' metoda. Ta metoda daje kolekcję elementów, które mają określony atrybut name.
Składnia
W przypadku metody getElementsByName() używana jest następująca składnia:
document.getElementsByName ( 'nazwa' )
Przykład
Najpierw utwórz sześć przycisków. Pięć z nich ma „ nazwa ” atrybut używany do pobrania elementu HTML „ przycisk ”. Dołącz zdarzenie onclick do szóstego przycisku, który wywoła „ zastosujStyl() ”, aby nadać styl pięciu przyciskom:
< przycisk nazwa = 'btn' > Przycisk przycisk >< przycisk nazwa = 'btn' > Przycisk przycisk >
< przycisk nazwa = 'btn' > Przycisk przycisk >
< przycisk nazwa = 'btn' > Przycisk przycisk >
< przycisk nazwa = 'btn' > Przycisk przycisk > < br >< br >
< przycisk po kliknięciu = „zastosuj styl()” > Kliknij tutaj przycisk >
Zdefiniuj funkcję „ zastosujStyl() ”, który uruchomi kliknięcie przycisku i zmieni kolor tła wszystkich przycisków. Aby to zrobić, najpierw zdobądź wszystkie „ przycisk ” elementy jako grupę, wywołując „ getElementsByName() ' metoda:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.tło = „niebieski kadet” ;
} ) ;
}
Jak widać na wyjściu, po kliknięciu przycisku kolor tła pięciu przycisków zostanie zmieniony:
Metoda 2: Pobierz element według nazwy przy użyciu metody „querySelectorAll()”.
Możesz także skorzystać z opcji „ zapytanieSelectorAll() ” metoda uzyskiwania elementów przy użyciu metody „ nazwa ” atrybut w JavaScript. Ta metoda służy do pobierania wszystkich elementów w dokumencie, które pasują do określonego selektora/atrybutu, takiego jak klasa CSS, identyfikator lub nazwa.
Składnia
Podana składnia służy do pobierania elementu według nazwy za pomocą „ zapytanieSelectorAll()” metoda:
document.querySelectorAll ( '[nazwa='n1']' ) ;
Przykład
W poniższym przykładzie zmienimy kolor tylko tych przycisków, których nazwa to „ btn1 ”:
< dz >< nazwa przycisku = 'btn' > Przycisk przycisk >
< nazwa przycisku = 'btn1' > Przycisk przycisk >
< nazwa przycisku = 'btn' > Przycisk przycisk >
< nazwa przycisku = 'btn1' > Przycisk przycisk >
< nazwa przycisku = 'btn' > Przycisk przycisk > < br >< br >
< przycisk po kliknięciu = „zastosuj styl()” > Kliknij tutaj przycisk >
dz >
W zdefiniowanej funkcji wywołamy najpierw dostęp do wszystkich elementów przycisku, których nazwa to „ btn1 ”, a następnie nałóż na nią stylizację:
const btns = document.querySelectorAll ( '[nazwa='btn1']' ) ;
btns.forEach ( btn = > {
btn.style.tło = „niebieski kadet” ;
} ) ;
}
Podany wynik oznacza, że tylko dwa przyciski zmieniły kolor tła, którego nazwa to „btn1”:
Notatka: Jeśli chcesz uzyskać pojedynczy element, zaleca się użycie document.querySelector zamiast document.querySelectorAll.
Wniosek
Aby uzyskać lub odzyskać element według nazwy, użyj „ getElementsByName() ' albo ' zapytanieSelectorAll() metody. Najpowszechniej i najskuteczniej stosowaną metodą uzyskiwania elementu po nazwie jest metoda „getElementsByName()”. Ten post ilustruje metody pobierania elementu HTML według nazwy w JavaScript.