使用 JavaScript 获取所有输入对象的列表，无需访问表单对象答案

【问题标题】：Get list of all input objects using JavaScript, without accessing a form object使用 JavaScript 获取所有输入对象的列表，无需访问表单对象
【发布时间】：2011-01-13 22:02:24
【问题描述】：

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

【问题讨论】：

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

标签： javascript html input field

【解决方案1】：

（请参阅答案末尾的更新。）

你可以通过getElementsByTagName（DOM specification、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 specification) 上，允许您仅搜索其后代而不是整个文档，例如：

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 是完成上述操作的绝对好方法，但如果您想做一些稍微复杂的事情怎么办，比如只找到所有复选框而不是所有 @ 987654334@元素？

这就是有用的querySelectorAll 的用武之地：它让我们得到一个匹配我们想要的任何 CSS 选择器的元素列表。所以对于我们的复选框示例：

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

您也可以在元素级别使用它。例如，如果我们在 element 变量中有一个 div 元素，我们可以像这样在 foo 中找到类 span 的所有 div：

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

所有现代浏览器以及 IE8 都支持

querySelectorAll 和它的表亲 querySelector（它只是找到 first 匹配元素而不是给你一个列表）。

【讨论】：

你为什么使用 ++index？ NodeList 中的元素以 0.. 开头，这样就跳过了第一个元素？？
@Alko：我不跳过第一个。循环中index 的第一个值是 0。 ++index 直到第一次循环迭代之后才会发生。
这会得到嵌套元素吗？例如，如果我有一个表格，然后在那个表格里面有一个表格，在那个表格里面有一个行，在那个行里面有一个输入 - 这真的会得到那个输入吗？我认为它可能只适用于顶级输入。我需要获取所有输入，嵌套或不嵌套。可能需要递归
@MobileMon - 是的，它适用于非子后代元素。事实上，我不知道有任何 DOM method 可以找到只查看子元素的元素。（仅限 DOM 集合，例如 children 和 childNodes。）。

【解决方案2】：

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

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

getElementsByTagName 现在返回 HTMLCollection 而不是 NodeList。因此，您首先需要将其转换为 array 才能访问 map 和 forEach 等方法：

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

【讨论】：

【解决方案3】：

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

【讨论】：