web-dev-qa-db-fra.com

Obtenir la liste de tous les objets d'entrée à l'aide de JavaScript, sans accéder à un objet de formulaire

J'ai besoin d'obtenir tous les objets input et de manipuler le paramètre onclick.

Ce qui suit fait le travail pour <a> liens. Vous cherchez quelque chose comme ça pour les balises input.

for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){
  var link = unescape(ls[i].href);
  link = link.replace(/\\'/ig,"#");
  if(ls[i].href.indexOf("javascript:") == -1)
  {
    ls[i].href = "javascript:LoadExtern(\\""+link+"\\",\\"ControlPanelContent\\",true,true);";
  }
}
javascripthtmlinputfield
33
Jeremy Gwa

(Voir la mise à jour à la fin de la réponse.)

Vous pouvez obtenir un NodeList de tous les éléments input via getElementsByTagName ( spécification DOM , MDC , MSDN ), puis parcourez-le simplement:

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

Là, je l'ai utilisé sur le document, qui recherchera tout le document. Il existe également sur des éléments individuels ( spécification DOM ), vous permettant de rechercher uniquement leurs descendants plutôt que l'ensemble du document, par exemple:

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

... mais vous avez dit que vous ne vouliez pas utiliser le parent form, donc le premier exemple est plus applicable à votre question (le second est juste là pour être complet, au cas où quelqu'un d'autre trouverait cette réponse a besoin de savoir).

Mise à jour : getElementsByTagName est une très bonne façon de faire ce qui précède, mais que faire si vous voulez faire quelque chose d'un peu plus compliqué, comme juste trouver toutes les cases à cocher au lieu de tous les éléments input?

C'est là que l'utile querySelectorAll entre en jeu: il nous permet d'obtenir une liste d'éléments qui correspondent à tout sélecteur CSS que nous voulons . Donc, pour notre exemple de cases à cocher:

var checkboxes = document.querySelectorAll("input[type=checkbox]");

Vous pouvez également l'utiliser au niveau de l'élément. Par exemple, si nous avons un élément div dans notre variable element, nous pouvons trouver tous les span avec la classe foo qui sont à l'intérieur de ce div comme ceci:

var fooSpans = element.querySelectorAll("span.foo");

querySelectorAll et son cousin querySelector (qui trouve juste l'élément correspondant d'abord au lieu de vous donner une liste) sont pris en charge par tous les navigateurs modernes, ainsi que IE8.

88
T.J. Crowder
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
  // ...
}
6
Pointy

querySelectorAll renvoie une NodeList qui a sa propre méthode forEach :

document.querySelectorAll('input').forEach( input => {
  // ...
});

getElementsByTagName renvoie désormais un HTMLCollection au lieu d'un NodeList. Vous devez donc d'abord le convertir en array pour avoir accès à des méthodes comme map et forEach :

Array.from(document.getElementsByTagName('input')).forEach( input => {
  // ...
});
1
JSON C11