javascript 通过名称或 ID 的一部分获取元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15874630/
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 element by part of Name or ID
提问by pistou
Here is an example of my form (only inputs that I want, but there is many others):
这是我的表单示例（只有我想要的输入，但还有很多其他输入）：
<form name="inputform" action="..." method="post">
<input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0">
<input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00">
<input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00">
<input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00">
<input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1">
<!-- another TR -->
<input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0">
<input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00">
<input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00">
<input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00">
<input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1">
</form>
What I want is to get values of inputs, but as the form is built in PHP, I don't know the line identifier (77, 108).
我想要的是获取输入的值，但由于表单是用 PHP 构建的，我不知道行标识符 (77, 108)。
Is there a way to do something like getElementByName('id_qtedje_%')?
有没有办法做类似的事情getElementByName('id_qtedje_%')？
Note: I'm not using any library, and I don't plan to use one.
注意：我没有使用任何库，也不打算使用任何库。
回答by T.J. Crowder
Your best bet is probably document.querySelectorAll, which you can use any CSS selector with, including an "attribute starts with" selectorlike input[id^="id_qtedje_"]. It's supported on all modern browsers, and also IE8:
您最好的选择可能是document.querySelectorAll，您可以使用任何 CSS 选择器，包括“属性开头为”选择器，如input[id^="id_qtedje_"]. 所有现代浏览器以及 IE8 都支持它：
var elements = document.querySelectorAll('input[id^="id_qtedje_"]');
If you wanted just the first match (rather than a list), you could use document.querySelectorinstead. It returns a reference to the first match in document order, or nullif nothing matched.
如果您只想要第一个匹配项（而不是列表），则可以document.querySelector改用。它返回对文档顺序中第一个匹配项的引用，或者null如果没有匹配项。
Alternately, you could give the elements a class name, then use document.getElementsByClassName, but note that while getElementsByClassNamewas supported in old versions of Chrome and Firefox, IE8 doesn't have it, so it's not as well-supportedas the more-useful querySelectorAllin the modern era.
或者，您可以给元素一个类名，然后使用document.getElementsByClassName，但请注意，虽然getElementsByClassName旧版本的 Chrome 和 Firefox 支持，但IE8 没有它，因此它不像querySelectorAll现代中更有用的那样受支持时代。
var elements = document.getElementsByClassName("theClassName");
If you use any libraries (jQuery, MooTools, Closure, Prototype, etc.), they're likely to have a function you can use to look up elements by just about any CSS selector, filling the gaps in browser support with their own code. For instance, in jQuery, it's the $(jQuery) function; in MooTools and Prototype, it's $$.
如果你使用任何库（jQuery、MooTools、Closure、Prototype 等），它们很可能有一个函数，你可以用它来通过几乎任何 CSS 选择器查找元素，用它们自己的代码填补浏览器支持的空白. 例如，在 jQuery 中，它是$( jQuery) 函数；在 MooTools 和 Prototype 中，它是$$.
回答by Manishearth
You can use the starts with selectorin jQuery
var listOfElements = $('[name^="id_qtedje_"]')
You may also be interested with the containsand ends withselectors
Using querySelectorAll, you can do
使用querySelectorAll，你可以做
document.querySelectorAll('[name^="id_qtedje_"]')
document.querySelectorAll('[name^="id_qtedje_"]')
Alternatively:
或者：
Assuming that all elements are inputs, you may use this:
假设所有元素都是inputs，你可以使用这个：
function getElementByNameStart(str){
var x=document.getElementsByTagName('input')
for(var i=0;i<x.length;i++){
if(x[i].indexOf(str)==0){
return x[i];
}
}
}
which can be called as getElementByNameStart("id_qtedje_")
可以称为 getElementByNameStart("id_qtedje_")
Note that this only returns the firstelement of this type. To return all:
请注意，这仅返回此类型的第一个元素。全部返回：
function getElementByNameStart(str){
var x=document.getElementsByTagName('input')
var a=[];
for(var i=0;i<x.length;i++){
if(x[i].indexOf(str)==0){
a.push(x[i])
}
}
return a;
}
If the elements are of any type, replace "input" with "*" (beware, this may make your code slow)
如果元素是任何类型，请将“输入”替换为“*”（请注意，这可能会使您的代码变慢）
