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

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

33 голосов
/ 06 февраля 2010

Мне нужно получить все 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);";
  }
}

Ответы [ 2 ]

86 голосов
/ 06 февраля 2010

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

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

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

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

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

6 голосов
/ 06 февраля 2010 
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
  // ...
}
...