Obtenir l'élément par type en JavaScript

1. Obtenir l’élément par querySelectorAll() en JavaScript
2. Obtenir l’élément par getElementsByTagName() en JavaScript

JavaScript fournit différentes manières d’obtenir un élément comme getElementById() et getElementByClass(). Mais que faire si vous souhaitez sélectionner/traiter tous les éléments d’un type spécifique ? JavaScript fournit la méthode querySelectorAll() ou la méthode getElementsByTagName() pour effectuer une telle tâche.

Dans cet article, nous allons apprendre à obtenir des éléments par leur type en JavaScript.

Obtenir l’élément par querySelectorAll() en JavaScript

Il s’agit d’une méthode document intégrée fournie par JavaScript et qui renvoie les objets d’élément/NodeList dont les sélecteurs correspondent aux sélecteurs spécifiés. Plusieurs sélecteurs peuvent également être passés. Il y a une différence entre querySelectorAll() et querySelector(). Avec le premier, tous les objets de l’élément correspondant sont renvoyés, puis avec le second, c’est un seul objet d’élément correspondant. Si un sélecteur invalide est passé, une SyntaxError est émise.

Syntaxe

document.querySelectorAll($selectors);

Paramètre

• $selectors : C’est un paramètre obligatoire qui spécifie le selector d’un attribut HTML qui doit correspondre. Plusieurs sélecteurs peuvent être transmis par séparation par des virgules. Par exemple, document.querySelectorAll("p") recherchez tous les éléments de la balise p.

Valeur de retour

Renvoie les objets d’élément DOM correspondants si les éléments correspondants sont trouvés ; sinon, il renvoie NodeList vide.

Exemple de code :

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

Production :

2
John
Doe

Obtenir l’élément par getElementsByTagName() en JavaScript

Il s’agit d’une méthode document intégrée fournie par JavaScript et qui renvoie les objets d’élément/NodeList dont le tag correspond au nom de balise spécifié. Le nœud racine est également inclus dans la recherche et les collections HTML en direct sont renvoyées.

Syntaxe

document.getElementsByTagName($name);

Paramètre

• $name : C’est un paramètre obligatoire qui spécifie le tagName d’un attribut HTML qui doit correspondre.

Valeur de retour

Renvoie l’objet élément DOM correspondant si les éléments correspondants sont trouvés ; sinon, il renvoie null.

La seule différence entre getElementsByTagName et querySelectorAll est que le premier ne sélectionne que les éléments dont le nom de balise spécifié correspond au nom de balise donné. En revanche, querySelectorAll peut utiliser n’importe quel sélecteur, ce qui lui donne beaucoup plus de flexibilité et de puissance.

De plus, getElementsByTagName renvoie une liste de nœuds en direct tandis que querySelectorAll renvoie une liste de nœuds statique. La liste de nœuds en direct aide à mettre à jour le résultat dès que le DOM change et ne vous oblige pas à lancer la requête.

Exemple de code :

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].type.toLowerCase() == 'text') {
    console.log(inputs[i].value);
  }
}

Production :

John
Doe