使用JavaScript获取所有输入对象的列表,而无需访问表单对象

Question

我需要获取所有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);";
  }
}

Answer 1

(请参阅答案末尾的更新.)

您可以通过(DOM规范,MDC,MSDN)获取NodeList所有input元素,然后只需循环遍历它:getElementsByTagName

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所有现代浏览器以及IE8都支持它的堂兄querySelector(只找到第一个匹配的元素而不是给你一个列表).

Answer 2

querySelectorAll返回一个NodeList，它有自己的forEach方法：

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

getElementsByTagName现在返回HTMLCollection而不是NodeList。因此，您首先需要将其转换为数组以访问诸如 map 和forEach 之类的方法：

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

Answer 3

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