通过Id获取多个元素
我有一个页面锚定标签整个身体像这样：
<a id="test" name="Name 1"></a> <a id="test" name="Name 2"></a> <a id="test" name="Name 3"></a> ID始终相同，但名称会更改。
例如，我需要填充这些锚标签的名称列表; 名字1，名字2，名字3.这是我到目前为止的地方：
document.write(document.getElementById("readme").name);
这写出了第一个锚标签的名称。 我需要通过Id获取多个元素的方法。
任何帮助是极大的赞赏。
如果您可以更改标记，则可能需要使用class 。
<!-- html --> <a class="test" name="Name 1"></a> <a class="test" name="Name 2"></a> <a class="test" name="Name 3"></a> // javascript var elements = document.getElementsByClassName("test"); var names = ''; for(var i=0; i<elements.length; i++) { names += elements[i].name; } document.write(names);
jsfiddle演示
与其他人可能说的相反，对多个元素使用相同的Id不会阻止页面被加载，但是当试图通过Idselect元素时，返回的唯一元素是指定了id的第一个元素。 更不用说使用相同的id甚至不是有效的HTML。
这样做，从来没有使用重复的ID属性。 如果你认为你需要，那么你正在寻找类 。 例如：
<div id="div1" class="mydiv">Content here</div> <div id="div2" class="mydiv">Content here</div> <div id="div3" class="mydiv">Content here</div>
注意每个给定的元素有不同的id，但是是同一个类。 与上面所做的相反，这是合法的HTML语法。 任何用于'.mydiv'的CSS样式（点意味着类）都将正确地适用于具有相同类的每个单独元素。
在Snipplr的帮助下，您可以通过指定某个类名来获取每个元素：
function getAllByClass(classname, node) { if (!document.getElementsByClassName) { if (!node) { node = document.body; } var a = [], re = new RegExp('\\b' + classname + '\\b'), els = node.getElementsByTagName("*"); for (var i = 0, j = els.length; i < j; i++) { if (re.test(els[i].className)) { a.push(els[i]); } } } else { return document.getElementsByClassName(classname); } return a; }
上面的脚本将返回一个数组，所以请确保您正确调整。
你不能有重复的ID。 Ids应该是独一无二的。 您可能想要使用专门的类。
这是我想出的一个function
function getElementsById(elementID){ var elementCollection = new Array(); var allElements = document.getElementsByTagName("*"); for(i = 0; i < allElements.length; i++){ if(allElements[i].id == elementID) elementCollection.push(allElements[i]); } return elementCollection; }
显然有一个惯例支持的原型，可能还有其他主要的JavaScript库。
不过，我发现美元符号函数已经成为document.getElementById（）的事实上的快捷方式。 让我们面对它，我们都使用document.getElementById（）很多。 input不仅需要时间，还会将字节添加到代码中。
这里是从原型的function：
function $(element) { if (arguments.length > 1) { for (var i = 0, elements = [], length = arguments.length; i < length; i++) elements.push($(arguments[i])); return elements; } if (Object.isString(element)) element = document.getElementById(element); return Element.extend(element); }
[资源]
今天，您可以通过这种方式select具有相同id属性的元素：
document.querySelectorAll('[id=test]');
或者这样用jQuery：
$('[id=test]');
CSSselect器#test { ... }也适用于id = "test"所有元素。 但唯一的事情是： document.querySelectorAll('#test') （或者$('#test') ）将只返回带有这个id的第一个元素。 这是否好，我不知道。 但有时很难遵循唯一的id标准 。
例如，您有注释小部件，使用HTML-ids和JS代码，使用这些HTML-ids。 迟早你需要多次渲染这个小部件，以便将不同的对象注释到一个单独的页面中：这里标准将会被破坏（通常没有时间或者不允许 – 重写内置代码）。
不允许多个具有相同ID的元素，getElementById返回元素的ID由elementId给定。 如果不存在这样的元素，则返回null。 如果多个元素具有此ID，则行为未定义。
如果你对保持HTML的有效性没有信心，那么我可以看到多个元素具有相同ID的用例可能是有用的。
一个例子是testing。 通常我们通过查找具有特定类的所有元素来确定要testing的元素。 但是，如果我们发现我们纯粹为了testing目的而添加类，那么我会认为这是错误的。 类是为了造型，而不是标识。
如果ID是用于识别的，为什么只有一个元素可以具有特定的标识符？ 特别是在今天的前端世界，如果我们不想使用类来进行识别，那么使用可重用的组件就需要使用ID。 但是，如果我们使用多个组件，我们将有多个具有相同ID的元素。
我说的没关系 如果这是对你的诅咒，那很好，我理解你的观点。 我们同意不同意，继续前进。
如果你想要一个实际上find所有同名的ID的解决scheme，那就是：
function getElementsById(id) { const elementsWithId = [] const allElements = document.getElementsByTagName('*') for(let key in allElements) { if(allElements.hasOwnProperty(key)) { const element = allElements[key] if(element.id === id) { elementsWithId.push(element) } } } return elementsWithId }
编辑，ES6 FTW：
function getElementsById(id) { return [...document.getElementsByTagName('*')].filter(element => element.id === id) }
“id”指定元素的唯一标识＆class为元素指定一个或多个类名。 所以最好使用“类”而不是“id”。
使用querySelectorAll你可以使用cssselect器来select你想要的元素而不使用相同的id：
var elems = document.querySelectorAll("#id1, #id1, #id3");
Below is the work around to submit Multi values, in case of converting the application from ASP to PHP <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <script language="javascript"> function SetValuesOfSameElements() { var Arr_Elements = []; Arr_Elements = document.getElementsByClassName("MultiElements"); for(var i=0; i<Arr_Elements.length; i++) { Arr_Elements[i].value = ''; var Element_Name = Arr_Elements[i].name; var Main_Element_Type = Arr_Elements[i].getAttribute("MainElementType"); var Multi_Elements = []; Multi_Elements = document.getElementsByName(Element_Name); var Multi_Elements_Values = ''; //alert(Element_Name + " > " + Main_Element_Type + " > " + Multi_Elements_Values); if (Main_Element_Type == "CheckBox") { for(var j=0; j<Multi_Elements.length; j++) { if (Multi_Elements[j].checked == true) { if (Multi_Elements_Values == '') { Multi_Elements_Values = Multi_Elements[j].value; } else { Multi_Elements_Values += ', '+ Multi_Elements[j].value; } } } } if (Main_Element_Type == "Hidden" || Main_Element_Type == "TextBox") { for(var j=0; j<Multi_Elements.length; j++) { if (Multi_Elements_Values == '') { Multi_Elements_Values = Multi_Elements[j].value; } else { if (Multi_Elements[j].value != '') { Multi_Elements_Values += ', '+ Multi_Elements[j].value; } } } } Arr_Elements[i].value = Multi_Elements_Values; } } </script> <BODY> <form name="Training" action="TestCB.php" method="get" onsubmit="SetValuesOfSameElements()"/> <table> <tr> <td>Check Box</td> <td> <input type="CheckBox" name="TestCB" id="TestCB" value="123">123</input> <input type="CheckBox" name="TestCB" id="TestCB" value="234">234</input> <input type="CheckBox" name="TestCB" id="TestCB" value="345">345</input> </td> <td> <input type="hidden" name="SdPart" id="SdPart" value="1231"></input> <input type="hidden" name="SdPart" id="SdPart" value="2341"></input> <input type="hidden" name="SdPart" id="SdPart" value="3451"></input> <input type="textbox" name="Test11" id="Test11" value="345111"></input> <!-- Define hidden Elements with Class name 'MultiElements' for all the Form Elements that used the Same Name (Check Boxes, Multi Select, Text Elements with the Same Name, Hidden Elements with the Same Name, etc --> <input type="hidden" MainElementType="CheckBox" name="TestCB" class="MultiElements" value=""></input> <input type="hidden" MainElementType="Hidden" name="SdPart" class="MultiElements" value=""></input> <input type="hidden" MainElementType="TextBox" name="Test11" class="MultiElements" value=""></input> </td> </tr> <tr> <td colspan="2"> <input type="Submit" name="Submit" id="Submit" value="Submit" /> </td> </tr> </table> </form> </BODY> </HTML> testCB.php <?php echo $_GET["TestCB"]; echo "<br/>"; echo $_GET["SdPart"]; echo "<br/>"; echo $_GET["Test11"]; ?>
使用jquery多select器。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>multiple demo</title> <style> div,span,p { width: 126px; height: 60px; float:left; padding: 3px; margin: 2px; background-color: #EEEEEE; font-size:14px; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div>div</div> <p class="myClass">p class="myClass"</p> <p class="notMyClass">p class="notMyClass"</p> <span>span</span> <script>$("div,span,p.myClass").css("border","3px solid red");</script> </body> </html>
链接： http ： //api.jquery.com/multiple-selector/
select器应该这样：$（“＃id1，＃id2，＃id3”）
