Получить список всех объектов ввода с помощью JavaScript, не обращаясь к объекту формы

Мне нужно получить все объекты input и манипулировать параметром onclick.

Следующее выполняет работу для <a> ссылок. Ищу что-то подобное для тегов 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);";
  }
}

person Jeremy Gwa    schedule 06.02.2010    source источник
comment
Ой, это уродливо и имеет несколько проблем с побегом. Вы никогда не захотите использовать javascript URL-адреса. Мое предложение для этого конкретного кода: оставьте href там, где он есть, и вместо этого просто установите ls[i].onclick= function() { LoadExtern(this.href, 'ControlPanelContent', true, true); };.   -  person bobince    schedule 06.02.2010


Ответы (2)


(См. обновление в конце ответа.)

Вы можете получить NodeList всех input элементов через getElementsByTagName (спецификация DOM, MDC, MSDN), затем просто прокрутите его:

var inputs, index;

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

Там я использовал его на document, который будет искать весь документ. Он также существует для отдельных элементов (спецификация DOM), что позволяет искать только их потомков, а не весь документ, например:

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.
}

... но вы сказали, что не хотите использовать родительский form, поэтому первый пример более применим к вашему вопросу (второй просто для полноты, на случай, если кто-то еще найдет этот ответ). знать).


Обновление: getElementsByTagName – это отличный способ сделать все вышеперечисленное, но что, если вы хотите сделать что-то более сложное, например просто найти все флажки вместо всех элементов input?

Вот тут-то и появляется полезный querySelectorAll: он позволяет нам получить список элементов, которые соответствуют любому селектору CSS, который нам нужен. Итак, для нашего примера флажков:

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

Вы также можете использовать его на уровне элемента. Например, если у нас есть элемент div в нашей переменной element, мы можем найти все span с классом foo, которые находятся внутри этого div следующим образом:

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

querySelectorAll и его двоюродный брат querySelector (который просто находит первый соответствующий элемент, а не дает вам список) поддерживаются всеми современными браузерами, а также IE8.

person T.J. Crowder    schedule 06.02.2010
comment
почему вы использовали ++index? Элементы в NodeList начинаются с 0... таким образом, вы пропускаете первый элемент?? - person Alko; 31.12.2014
comment
@Alko: я не пропускаю первое. Первое значение index в цикле равно 0. ++index не происходит до первой итерации цикла. - person T.J. Crowder; 31.12.2014
comment
Будет ли это получать вложенные элементы? Например, если у меня есть форма, а затем внутри этой формы есть таблица, а внутри этой таблицы есть строка, а внутри этой строки есть ввод - действительно ли он получит этот ввод? Я думаю, что это может работать только для входных данных верхнего уровня. Мне нужно получить ВСЕ входы, вложенные или не вложенные. Наверное нужна рекурсия - person MobileMon; 12.11.2020
comment
@MobileMon - Да, это работает для не дочерних элементов-потомков. Я не знаю ни одного метода DOM, который находит элементы, который на самом деле просматривает только дочерние элементы. (Только DOM коллекции, такие как children и childNodes.). - person T.J. Crowder; 12.11.2020

querySelectorAll возвращает NodeList который имеет собственный метод forEach:

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

getElementsByTagName теперь возвращает HTMLCollection вместо NodeList. Поэтому вам сначала нужно преобразовать его в массив . для доступа к таким методам, как map и для каждого:

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