Comment obtenir un élément par type en javascript

Il existe plusieurs façons d'obtenir ou de récupérer un élément en JavaScript, y compris GetElementById () et GetElementByClass (). Cependant, avez-vous déjà pensé à obtenir le type d'élément? Si c'est le cas, alors laissez-nous vous dire que JavaScript propose les méthodes QuerySelectorall () ou GetElementsByTagName () qui peuvent être utilisées à des fins spécifiées.

Cet article expliquera les méthodes pour obtenir des éléments par type JavaScript.

Comment obtenir un élément par type en javascript?

Pour obtenir des éléments par type, utilisez les méthodes suivantes:

• Méthode QueySelectorall ()
• Méthode GetElementsByTagName ()

Voyons chacune des méthodes mentionnées une par une!

Méthode 1: Obtenez un élément par type à l'aide de QuerySelectorall () Méthode

"queySelectorall ()"Est une méthode de document prédéfinie JavaScript qui renvoie les objets d'élément qui correspondent aux sélecteurs spécifiés. Les méthodes QuerySelectorall () et queySelector () fonctionnent de la même manière, mais la principale différence est que la méthode QuerySelectorall () obtient tous les éléments correspondant au sélecteur tandis.

Syntaxe
Suivez la syntaxe donnée pour l'élément Getting par type à l'aide de la méthode QuerySelectorall ():

document.queySelectorall (sélecteurs);

Ici le "sélecteur"Est le type dont vous souhaitez obtenir les éléments par exemple"saisir" ou "entrée [type = texte]". Il découvrira tous les éléments correspondant au sélecteur spécifié et reviendra au DOM. Vous pouvez passer plusieurs sélecteurs séparés par des virgules.

Exemple 1: Obtenez un élément par type
Dans l'exemple suivant, nous créerons un champ de saisie "texte"Avec id"Nom"Et valeur"John"Et un titre:

Get Element by type = input [type = text]

Créez également trois types d'entrée "radio«En attribuant des ID et des valeurs:

Html

CSS

Javascrip

Ensuite, créez un bouton en fixant "sur clic»Événement qui déclenchera la méthode définie par l'utilisateur nommé«elementGetByType ()»:

Cliquez sur

Dans un fichier javascript, appelez d'abord le «queySelectorall ()"Méthode en passant un sélecteur"entrée [type = texte]«Cela rendra tous les éléments de ce type. Ensuite, définissez un «elementGetByType ()”Méthode où une méthode alert () imprime le message avec la valeur du sélecteur spécifié:

var elementTypeseElector = document.queySelectorall ('input [type = text]');
function elementGetByType ()
alerte ("Le texte du type d'entrée de l'élément HTML contient" + elementTypeseElector [0].valeur);

La sortie s'affiche «John”Dans un message d'alerte qui est la valeur du champ de texte de type d'entrée:

Exemple 2: Obtenez tous les éléments par type
Maintenant, obtenez tous les éléments du type d'entrée en passant «saisir"Comme argument dans le"queySelectorall ()" méthode:

var elementTypeseElector = document.queySelectorall ('entrée');

Imprimez les valeurs du «saisir«Sélecteur y compris«texte" et "radio”Sur la console:

console.Log (ElementTypeseselector [0].valeur, elementTypeseselector [1].valeur, elementTypeseselector [2].valeur, elementTypeseselector [3].valeur);

Sortir

Méthode 2: Obtenez l'élément par type à l'aide de GetElementsByTagName () Méthode

Il existe une autre méthode prédéfinie JavaScript appelée «getElementsByTagName ()"Cela renvoie les objets d'élément dont le nom de balise correspond au nom spécifié.

Syntaxe
Utilisez la syntaxe suivante pour utiliser la méthode GetElementByTagName ():

document.getElementsByTagName (nom);

Ici, "nom”Est ​​le nom de tagN d'un attribut HTML.

Exemple
Dans cet exemple, nous obtiendrons la valeur de l'élément par type en utilisant le «getElementsByTagName ()"Méthode, où nous passerons le nom de la balise"saisir”Pour que les valeurs de l'élément correspondent au nom de balise spécifié et le stockent dans une variable"ElementTypesesector". Ensuite, définissez un «elementGetByType ()”Fonction, dans laquelle la boucle FOR itérera jusqu'à la longueur du sélecteur et vérifiez le type du sélecteur; S'il est égal à «radio», appelez la méthode alert () pour imprimer les valeurs de l'élément radio:

var elementTypeseElector = document.getElementsByTagName ('entrée');
function elementGetByType ()
pour (soit i = 0; i < elementTypeSelector.length; i++)
if (elementTypeseselector [i].type == 'radio')
alerte ("La radio de type d'entrée d'élément HTML contient" + elementTypeseElector [i].valeur);

La sortie montre toutes les valeurs de la radio de type d'entrée:

Nous avons fourni toutes les solutions pour obtenir des éléments par type JavaScript.

Conclusion

Pour obtenir les éléments par type, utilisez les méthodes prédéfinies JavaScript, y compris la méthode QueySelectorall () ou la méthode GetElementsByTagName (). La seule différence entre les deux est que le GetElementsByTagName () ne vient que des éléments dont le nom de balise défini correspond à la balise fournie tandis que QuerySelectorall, qui sélectionne tous les éléments. Dans cet article, nous avons expliqué les différentes approches pour obtenir des éléments par type JavaScript.