通过Id获取多个元素

Posted 2023-02-16

【中文标题】通过Id获取多个元素

【英文标题】：Get multiple elements by Id

【发布时间】：2011-07-17 08:37:39

【问题描述】：

我有一个页面，整个页面都有这样的锚标签：

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

---

非常感谢任何帮助。

【问题讨论】：

id不能相同。 html 规范要求它是唯一的。

作为参考，该页面不是有效的 HTML，因此用户代理的行为在处理它时是未定义的。根据the W3c spec，id 属性“在文档中必须是唯一的”。这就是唯一标识符的全部 point，这就是为什么您没有 DOM 方法来获取具有相同 ID 的多个元素（因为后者没有任何意义）。

javascript and getElementById的可能重复

你的意思是getElementById("test").name？

@Quentin 在一个完美的世界中是的，但你会感到惊讶

【参考方案1】：

如果您可以更改标记，您可能想改用class。

HTML

<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 demo

【讨论】：

如果我使用

如果你想要一个对所有三个都有效的属性，

这如何回答 OP 关于通过 id 获取元素的问题？

【参考方案2】：

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

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

或者用jQuery这样：

$('[id=test]');

CSS 选择器#test ... 应该也适用于所有带有id = "test" 的元素。 Вut 唯一的事情：document.querySelectorAll('#test')（或$('#test')） - 将仅返回具有此 id 的第一个元素。 好不好——我说不出来。但有时很难关注unique id standart。

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

【讨论】：

正确回答问题 + 比 $('*').filter 答案更有效。除非您知道自己在做什么，否则使用类是最好的解决方案。

感谢您按要求回答问题，而不是挑战框架。使用类是一个不错的解决方案……除非您使用的是其他人的代码/网页。对于 Tampermonkey 脚本之类的东西，我们无法让页面“正确”。我想隐藏 Quora 的所有新的付费“订阅”帖子，这些帖子都具有 id="content_paywall_card_title_text" 并且与常规帖子没有其他显着的区别特征。所以这个实际上回答了问题的答案非常有帮助。谢谢。

【参考方案3】：

与其他人可能会说的相反，对多个元素使用相同的 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;

上面的脚本会返回一个数组，所以请确保你正确调整。

【讨论】：

@Shaz 你就是那个男人，因为你用纯 JavaScript +1 保持真实。

@Loktar 所以突然需要重新发明***？有几十个生产质量的库可以将上述代码简化为单行代码。

@Sean Patrick Floyd 好吧，OP 没有要求 jQuery，如果用户只需要一些功能，为什么要增加页面加载时间，稍微降低速度？当然，您使用 jQuery 编写的代码可能更短，但总体而言要大得多。我不会每次想要牛排时都买一头牛。

@Loktar 我认为如果你做任何不平凡的事情，拥有一个 javascript DOM 操作库是必须的。只需从 CDN 获取它，它已被缓存。除了上述功能之外，还有一些浏览器错误。

@Sean Patrick Floyd 我同意这一点，我的主要观点是 10 行代码，你不应该仅仅求助于使用框架。

【参考方案4】：

您不能有重复的 ID。 ID应该是唯一的。您可能想改用专门的类。

【讨论】：

是的，您可以有重复的 ID。这是一个坏主意，但你可以拥有它们。

【参考方案5】：

这是我想出的一个函数

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]

【参考方案6】：

您应该使用 querySelectorAll，它将每个出现的事件写入一个数组，并允许您使用 forEach 获取单个元素。

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

【参考方案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)

【讨论】：

“类用于样式化，而不是标识” 虽然这可能是最初的意图，但现在已经不是这样了。考虑来自the MDN 的这些句子：“类允许 CSS 和 Javascript 选择和访问特定元素” 和 “鼓励网络开发人员使用 描述元素的语义目的，而不是元素的表示"

看，我认为这是一个骗局，因为实现 ID 太有限了。现在类有两个目的，这不是一件好事。我们可能需要另一个属性（也许是“分类法”？），它仅用于识别，但可能用于多个元素。不过，如果没有这个，我对一些无效的 HTML 感到满意。

【参考方案8】：

使用 querySelectorAll，您可以使用 css 选择器选择没有相同 id 的元素：

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

【参考方案9】：

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

【参考方案10】：

您可以通过标识它是什么元素来通过 id 获取多个元素。例如

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

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

选择所有这些

$("div#id")

。这将为您提供基于您的逻辑循环它们的元素数组。

【参考方案11】：

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

【参考方案12】：

没有重复的ids，这是基础。如果你有一个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，则选择它们会更容易。 具有不同 ids 的元素位于 array 中。 例如，您可以使用 forEach() 方法将它们从 DOM 中删除：

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

【参考方案13】：

使用 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")

【讨论】：

找不到有问题的#jquery标签。

【参考方案14】：

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

【讨论】：

找不到有问题的#php标签。