javascript - 使用 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

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

你可以得到一个NodeList通过 getElementsByTagName(DOM specification、MDC、MSDN)获取所有 input 元素，然后简单地遍历它:

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

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

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

您也可以在元素级别使用它。例如，如果我们的 element 变量中有一个 div 元素，我们可以找到类为 foo 的所有 span 位于 div 内，如下所示:

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

querySelectorAll 及其表亲 querySelector(它只是找到第一个匹配元素而不是给你一个列表)被所有现代浏览器支持, 还有 IE8。