通过 Id 获取多个元素

我有一个页面，上面的锚标签贯穿整个身体，就像这样:

<a id="test" name="Name 1"></a>
<a id="test" name="Name 2"></a>
<a id="test" name="Name 3"></a>

ID 始终相同，但名称更改。

我需要填充这些锚标记的名称列表，例如: Name 1、 Name 2、 Name 3。这就是我目前为止的进展:

document.write(document.getElementById("readme").name);

这将写出第一个锚标记的名称。我需要一种方法来获得多个元素的 ID。

非常感谢您的帮助。

341676 次浏览
小开
最佳答案

如果可以更改标记，则可能需要改为使用 class。

超文本标示语言

<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>

JS

var elements = document.getElementsByClassName("test");
var names = '';
for(var i = 0; i < elements.length; i++) {
names += elements[i].name;
}
document.write(names);

Jsfiddle 演示

小开

您不能使用重复的 id。 id 应该是唯一的。您可能需要使用专门的类来代替。

小开

与其他人可能说的相反，对多个元素使用相同的 Id 不会停止加载页面，但是当试图通过 Id 选择一个元素时，返回的唯一元素是指定了 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 语法。您使用的任何 CSS 样式’。Mydiv’(点表示类)将正确地适用于具有相同类的每个单独元素。

在 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;
}

上面的脚本将返回一个 Array，因此请确保适当调整。

小开

不允许多个具有相同 ID 的元素，getElementById 返回其 ID 由 elementId 给出的元素。如果不存在这样的元素，则返回 null。如果多个元素具有此 ID，则不定义行为。

小开

这是我想出来的一个函数

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 () 输入需要花费时间，但它也会给代码增加字节。

这是原型的功能:

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);
}

[来源]

小开

为元素和类指定唯一的 id 为元素指定一个或多个类名。所以最好使用“ Class”而不是“ id”。

小开 
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 多选择器。

<!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/

选择器应该是这样的: $(“ # id1，# id2，# id3”)

小开

如果你对保持 HTML 的有效性没有信心，那么我可以看到在多个元素上使用相同的 ID 可能是有用的用例。

一个例子是测试。通常，我们通过查找具有特定类的所有元素来确定要测试的元素。然而，如果我们发现自己添加类纯粹是为了测试目的，那么我认为这是错误的。类用于样式化，而不是标识。

如果 ID 是用于标识的，为什么 必须的只能有一个元素具有特定的标识符？特别是在今天的前端世界中，如果我们不想使用类来标识，那么我们需要使用 ID。但是，如果我们使用一个组件的倍数，我们将有多个具有相同 ID 的元素。

我是说没关系。如果你讨厌这样，没关系，我理解你的观点。让我们求同存异，继续前进。

如果您想要一个解决方案，实际上找到所有同名的 ID，那么它是:

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 属性的元素:

document.querySelectorAll('[id=test]');

或者使用 jQuery:

$('[id=test]');

CSS 选择器 #test { ... }也应该适用于 id = "test"中的所有元素。但是唯一的事情是: document.querySelectorAll('#test')(或 $('#test'))-将只返回第一个具有这个 id 的元素。 它是好还是不好——我不知道。但是有时候很难跟上 唯一的身份标准。

例如，可以使用带有 HTML-ids 和 JS-code 的注释小部件来处理这些 HTML-ids。迟早你需要多次渲染这个小部件，将不同的对象注释到一个单独的页面中: 在这里，标准将被打破(通常没有时间或者不允许——重写内置代码)。

小开

使用 所有，您可以使用 css 选择器选择您想要的元素，而不需要相同的 id:

var elems = document.querySelectorAll("#id1, #id1, #id3");
小开

您应该使用 querySelectorAll，它将每个匹配项写入一个数组中，并允许您使用 forEvery 来获取单个元素。

document.querySelectorAll('[id=test]').forEach(element=>
document.write(element);
});
小开

您可以通过标识 id 来获得多个元素，方法是确定它是什么元素

<div id='id'></div>
<div id='id'></div>
<div id='id'></div>

我假设如果您正在使用 jQuery，那么您可以通过

$(“ div # id”)

。这将得到您的元素数组，您循环它们基于您的逻辑。

小开

没有重复的 身份证，它是基础。如果你有一个 html结构作为

<a id="test1" name="Name_1">a1</a>
<a id="test2" name="Name_2">a2</a>
<a id="test3" name="Name_3">a3</a>

现在，使用 ES6，您可以使用 map()方法选择具有不同 id 的多个元素:

const elements = ['test1', 'test2', 'test3'].map(id => document.getElementById(id));


console.log(elements);
// (3) [a#test1, a#test2, a#test3]

当然，如果它们具有相同的 class，则更容易选择它们。
具有不同 身份证的元素位于 数组中。 例如，您可以使用 forEach()方法将它们从 DOM中移除:

elements.forEach(el => el.remove());

提交答案