JavaScript Get Element po nazwie - HTML
W różnych sytuacjach programiści muszą uzyskać element HTML według atrybutu nazwy. Załóżmy, że deweloper chce uzyskać dostęp do kontroli formularza, na przykład przycisk opcji lub pole wyboru, aby odczytać lub manipulować jego wartością. Mówiąc dokładniej, „nazwa„Atrybut jest używany do kontroli formularzy powiązanych z grupą, a ta sama nazwa może być dostarczona do wielu elementów sterujących, co pozwala im dostęp jako pojedyncza grupa.
Ten post ilustruje metody pobierania elementu HTML według nazwy w JavaScript.
Jak uzyskać elementy według nazwy w JavaScript?
W JavaScript możesz uzyskać dostęp do elementu HTML za pomocą jego atrybutu nazwy za pomocą następujących predefiniowanych metod JavaScript:
-
- Metoda getElementsByName ()
- Metoda QuerySelectorall ()
Metoda 1: Zdobądź element według nazwy za pomocą metody „getElementsByName ()”
Aby uzyskać element HTML po nazwie, użyj „getElementsByName ()" metoda. Ta metoda zawiera zbiór elementów, które mają określony atrybut nazwy.
Składnia
Poniższa składnia jest używana do metody GetElementsByName ():
dokument.getElementsByName („Nazwa”)
Przykład
Po pierwsze, utwórz sześć przycisków. Pięć z nich ma „nazwa„Atrybut, który służy do uzyskania elementu HTML”przycisk". Dołącz wydarzenie OnClick z szóstym przyciskiem, który zadzwoniłby do „ApplyStyle ()„Funkcja, aby stylizować pięć przycisków:
Zdefiniuj funkcję „ApplyStyle ()„To wywoła przycisk Kliknij i zmieni kolor tła wszystkich przycisków. Aby to zrobić, po pierwsze, zdobądź wszystkie „przycisk„Elementy jako grupa, nazywając„getElementsByName ()" metoda:
funkcja ApplyStyle ()
const btns = dokument.getElementsByName („BTN”);
BTNS.foreach (btn =>
Btn.styl.tłem = "cadetBlue";
);
Jak widać na wyjściu podczas klikalania przycisku, zostanie zmieniony kolor tła pięciu przycisków:
Metoda 2: Pobierz element według nazwy za pomocą metody „QuerySelelectall ()”
Możesz także skorzystać z „QuerySelelection ()„Metoda uzyskiwania elementów za pomocą„nazwa”Atrybut w JavaScript. Ta metoda służy do pobierania wszystkich elementów w dokumencie, który pasuje do określonego selektora/atrybutu, takiego jak klasa CSS, identyfikator lub nazwa.
Składnia
Podana składnia jest wykorzystywana do uzyskania elementu według nazwy za pomocą „QuerySelelectall () ” metoda:
dokument.querySelelectionAll ('[name = "n1"]');
Przykład
W poniższym przykładzie zmienimy kolor tylko tych przycisków, których nazwa to „BTN1”:
W określonej funkcji wywołamy pierwsze dostęp do wszystkich elementów przycisków, których nazwa to „BTN1”A następnie zastosuj na nim styl:
funkcja ApplyStyle ()
const btns = dokument.querySelelectionAll ('[name = "btn1"]');
BTNS.foreach (btn =>
Btn.styl.tłem = "cadetBlue";
);
Dane wyjście oznacza, że tylko dwa przyciski zmieniły kolor tła, którego nazwa to „BTN1”:
Notatka: Jeśli chcesz uzyskać jeden element, zaleca się użycie dokumentu.querySelector zamiast dokumentu.querySelelectionall.
Wniosek
Aby uzyskać lub pobieranie elementu z nazwy, użyj „getElementsByName ()" albo "QuerySelelection ()”Metody. Najczęściej i skutecznie stosowaną metodą uzyskania elementu według nazwy jest metoda „getElementsByName ()”. Ten post ilustruje metody pobierania elementu HTML według nazwy w JavaScript.