使用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);";
  }
}

- Jeremy Gwa

---

哎呀，那太丑了，而且有几个转义问题。你永远不想使用 javascript URL。对于这段特定的代码，我的建议是：保留 href 在原地，而只需设置 ls[i].onclick= function() { LoadExtern(this.href, 'ControlPanelContent', true, true); };。 - bobince

Answer 1

（请查看答案结尾的更新部分。）

你可以通过使用 getElementsByTagName (DOM 规范,MDC,MSDN) 获取所有 input 元素的 NodeList，然后进行简单的遍历:

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元素，我们可以像这样找到所有在该div内部具有类名foo的span：

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

querySelectorAll 和它的近亲 querySelector（它只查找第一个匹配元素而不是给你一个列表）被所有现代浏览器支持，包括IE8。

- T.J. Crowder

---

你为什么使用++index？NodeList中的元素从0开始，这样可以跳过第一个元素吗？ - Alko

@Alko：我没有跳过第一个。循环中index的第一个值是0。在第一次循环迭代之后才会发生++index。 - T.J. Crowder

这会获取嵌套元素吗？例如，如果我有一个表单，然后在表单内部有一个表格，在表格内部有一行，在该行内部有一个输入框 - 这是否会实际获取该输入框？我认为它可能只适用于顶级输入框。我需要获取所有输入框，无论是嵌套还是非嵌套的。可能需要使用递归。 - MobileMon

@MobileMon - 是的，它适用于非子后代元素。事实上，我不知道任何只查看子元素的DOM方法，只有像children和childNodes这样的DOM集合。 - T.J. Crowder

Answer 2

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

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

getElementsByTagName 现在返回一个HTMLCollection，而不是一个NodeList。所以你需要先将它转换为一个array，以便访问像map和forEach这样的方法：

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

- JSON C11

Answer 3

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

- Pointy