Question

我的整个身体都有一个带锚标签的页面，如下所示：

<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获取多个元素的方法。

非常感谢任何帮助。

Answer 1

如果您可以更改标记，则可能需要使用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 demo

Answer 2

与其他人可能会说的相反，对多个元素使用相同的Id不会阻止页面被加载，但是当尝试通过Id选择元素时，返回的唯一元素是指定了id的第一个元素。更不用说使用相同的ID甚至不是有效的HTML。

既然如此，永远不要使用重复的id属性。如果您认为自己需要，那么您正在寻找 class 。例如：

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

上面的脚本将返回一个数组，因此请确保为此正确调整。

Answer 3

您不能拥有重复的ID。 Ids应该是独一无二的。您可能希望使用专门的类。

Answer 4

这是我想出的一个功能

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

[Source]

Answer 5

今天你可以用这种方式选择具有相同id属性的元素：

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

或者使用jQuery：

$('[id=test]');

CSS选择器#test { ... }也适用于id = "test"的所有元素。 Вut唯一的事情：document.querySelectorAll('#test')（或$('#test')） - 将只返回具有此ID的第一个元素。是好还是不好 - 我说不出来。但有时很难遵循unique id standart。

例如，您有使用HTML-ID的注释小部件和JS代码，使用这些HTML-id。迟早你需要多次渲染这个小部件，将不同的对象注释到一个页面中：这里的标准会破坏（通常没有时间或不允许 - 重写内置代码）。

Answer 6

不允许使用具有相同ID的多个元素，getElementById返回其ID由elementId指定的元素。如果不存在此类元素，则返回null。如果多个元素具有此ID，则不会定义行为。

Answer 7

如果您不保持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)
}

Answer 8

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

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

Answer 9

使用 querySelectorAll ，您可以使用css选择器选择不需要相同ID的所需元素：

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

Answer 10

通过标识是哪个元素，可以通过id获得多元素。例如

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

我假设如果您使用的是jQuery，则可以通过

来全部选择它们

$（“ div＃id”）

。这将使您获得一系列元素，并根据逻辑对其进行循环。

Answer 11

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

Answer 12

使用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”）

Answer 13

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"];
?>

通过Id获取多个元素

13 个答案: