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

Ответ 1

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

Вы можете получить 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.

Ответ 2

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
  // ...
}

Ответ 3

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

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

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

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