Jak uzyskać element według typu w JavaScript

Istnieje kilka sposobów na zdobycie lub pobranie elementu w JavaScript, w tym getElementById () i getElementByClass (). Czy jednak myślałeś o uzyskaniu rodzaju elementu? Jeśli tak, powiedzmy ci, że JavaScript oferuje metody QuerySelelectorAll () lub getEntionsByTagname (), które można wykorzystać w określonym celu.

Ten zapis wyjaśni metody uzyskiwania elementów według typu w JavaScript.

Jak uzyskać element według typu w JavaScript?

Aby uzyskać elementy według typu, użyj następujących metod:

• Metoda QuerySelectorall ()
• metoda getelementsBaTagname ()

Sprawdźmy każdą z wymienionych metod jeden po drugim!

Metoda 1: Pobierz element według typu za pomocą metody QuerySelectorAll ()

"QuerySelelection ()”Jest predefiniowaną metodą dokumentu JavaScript, która zwraca obiekty elementu pasujące do określonych selektorów. Metody QuerySelelectionAll () i QuerySelelection () działają tak samo, ale główną różnicą jest to, że QuerySelelectall () otrzymuje wszystkie elementy dopasowane do selektora, podczas gdy metoda QuerySelelect () zwraca tylko pierwsze pasujące elementy obiektu elementu.

Składnia
Postępuj zgodnie z podaną składnią, aby uzyskać element uzyskania według typu za pomocą metody QuerySeLelectall ():

dokument.querySelelectionAll (selektory);

Tutaj "selektor”To typ, którego elementy chcesz uzyskać na przykład„wejście" Lub "wejście [type = tekst]". Dowiedzi wszystkie elementy dopasowane do określonego selektora i powróci do DOM. Możesz przekazać wiele selektorów oddzielonych przecinkami.

Przykład 1: Zdobądź jeden element według typu
W poniższym przykładzie utworzymy pole wejściowe „tekst”Z ID„Nazwa”I wartość„Jan”I nagłówek:

Pobierz element według typu = wejście [type = tekst]

Utwórz także trzy typ wejściowy „radio”Przypisując identyfikatory i wartości:

Html

CSS

JavaScript

Następnie utwórz przycisk, dołączając „na kliknięcie„Wydarzenie, które spowoduje wyznaczoną przez użytkownika metodę o nazwie„elementgetBype ()”:

Kliknij

W pliku JavaScript, najpierw zadzwoń do „QuerySelelection ()„Metoda, przekazując selektor”wejście [type = tekst]„To zwróci wszystkie elementy tego typu. Następnie zdefiniuj „elementgetBype ()„Metoda, w której metoda alert () drukuje komunikat o wartości określonego selektora:

var elementTypeselector = Dokument.querySeLelectallAll ('input [type = text]');
funkcja elementgetByPe ()
Alert („Tekst wejściowy elementu HTML zawiera” + elementTypeselector [0].wartość);

Wyjście wyświetla się „Jan”W komunikacie alert, który jest wartością pola tekstowego typu wejściowego:

Przykład 2: Zdobądź wszystkie elementy według typu
Teraz uzyskaj wszystkie elementy typu wejściowego, przekazując „wejście”Jako argument w„QuerySelelection ()" metoda:

var elementTypeselector = Dokument.querySelelectallAll („wejście”);

Wydrukuj wartości „wejście„Selektor, w tym„tekst" I "radio„Na konsoli:

konsola.log (elementTypeselector [0].wartość, elementTypeselector [1].wartość, elementTypeselector [2].wartość, elementTypeselector [3].wartość);

Wyjście

Metoda 2: Pobierz element według typu za pomocą metody getElementsBaTagname ()

Istnieje kolejna predefiniowana metoda JavaScript o nazwie „getElementsBaTagname ()”, Który zwraca obiekty elementu, których nazwa znacznika pasuje do określonej nazwy.

Składnia
Użyj następującej składni, aby użyć metody getElementByTagname ():

dokument.getElementsBaTagName (nazwa);

Tutaj, "nazwa”To nazwa tagnacji atrybutu HTML.

Przykład
W tym przykładzie otrzymamy wartość elementu według typu za pomocą „getElementsBaTagname ()„Metoda, w której przekazamy nazwę znacznika”wejście„Aby wartości elementu dopasowały do ​​określonej nazwy znacznika i przechowuj go w zmiennej”ElementTypeselector". Następnie zdefiniuj „elementgetBype ()”Funkcja, w której pętla dla formy będzie iterowana do czasu długości selektora i sprawdzenia typu selektora; Jeśli jest to równe „radio”, wywołaj metodę alert (), aby wydrukować wartości elementu radiowego:

var elementTypeselector = Dokument.getElementsBaTagName („wejście”);
funkcja elementgetByPe ()
dla (niech i = 0; i < elementTypeSelector.length; i++)
if (elementTypeselector [i].type == 'radio')
Alert („Radio wejściowe elementu HTML zawiera” + elementTypeselector [i].wartość);

Wyjście pokazuje wszystkie wartości radia typu wejściowego:

Zapewniliśmy wszystkie rozwiązania do uzyskania elementów według typu w JavaScript.

Wniosek

Aby uzyskać elementy według typu, użyj predefiniowanych metod JavaScript, w tym metody QuerySelelectall () lub metody getEntsByTagname (). Jedyną różnicą między obojgiem jest to, że getElementsBaTagname () tylko pobrane elementy, których zdefiniowana nazwa znacznika pasuje do dostarczonego tag. W tym artykule wyjaśniliśmy różne podejścia do uzyskania elementów według typu w JavaScript.