使用 JavaScript 获取所有输入对象的列表，无需访问表单对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2214066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get list of all input objects using JavaScript, without accessing a form object
提问by Jeremy Gwa
I need to get all the inputobjects and manipulate the onclickparam.
我需要获取所有input对象并操作onclick参数。
The following does the job for <a>links. Looking for something like this for inputtags.
以下是<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);";
}
}
回答by T.J. Crowder
(See update at end of answer.)
（请参阅答案末尾的更新。）
You can get a NodeListof all of the inputelements via getElementsByTagName(DOM specification, MDC, MSDN), then simply loop through it:
您可以通过（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.
}
There I've used it on the document, which will search the entire document. It also exists on individual elements (DOM specification), allowing you to search only their descendants rather than the whole document, e.g.:
我在 上使用了它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.
}
...but you've said you don't want to use the parent form, so the first example is more applicable to your question (the second is just there for completeness, in case someone else finding this answer needs to know).
...但是你已经说过你不想使用 parent form，所以第一个例子更适用于你的问题（第二个例子只是为了完整性，以防其他人找到这个答案需要知道）。
Update: getElementsByTagNameis an absolutely fine way to do the above, but what if you want to do something slightly more complicated, like just finding all of the checkboxes instead of all of the inputelements?
更新:getElementsByTagName是执行上述操作的绝对好方法，但是如果您想做一些稍微复杂的事情，例如只找到所有复选框而不是所有input元素，该怎么办？
That's where the useful querySelectorAllcomes in: It lets us get a list of elements that match any CSS selector we want. So for our checkboxes example:
这就是有用的地方querySelectorAll：它让我们得到一个元素列表，这些元素与我们想要的任何 CSS 选择器相匹配。所以对于我们的复选框示例：
var checkboxes = document.querySelectorAll("input[type=checkbox]");
You can also use it at the element level. For instance, if we have a divelement in our elementvariable, we can find all of the spans with the class foothat are inside that divlike this:
您也可以在元素级别使用它。举例来说，如果我们有一个div在我们的元素element变量，我们可以发现所有的span与S类foo是内部的div这样的：
var fooSpans = element.querySelectorAll("span.foo");
querySelectorAlland its cousin querySelector(which just finds the firstmatching element instead of giving you a list) are supported by all modern browsers, and also IE8.
querySelectorAll所有现代浏览器以及 IE8 都支持它的表亲querySelector（它只是找到第一个匹配元素而不是给你一个列表）。
回答by Pointy
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
// ...
}
回答by JSON C11
querySelectorAllreturns a NodeListwhich has its own forEachmethod:
querySelectorAll返回一个NodeList，它有自己的forEach方法：
document.querySelectorAll('input').forEach( input => {
// ...
});
getElementsByTagNamenow returns an HTMLCollectioninstead of a NodeList. So you would first need to convert it to an arrayto have access to methods like map and forEach:
getElementsByTagName现在返回HTMLCollection而不是NodeList。因此，您首先需要将其转换为数组以访问诸如 map 和forEach 之类的方法：
Array.from(document.getElementsByTagName('input')).forEach( input => {
// ...
});
