JavaScript und getElementById für mehrere Elemente mit der gleichen ID

Question

Wie kann ich eine Sammlung von Elementen erhalten, indem Sie ihr id Attribut angeben? Ich möchte den Namen aller Tags erhalten, die die gleiche id im HTML haben.

Ich möchte ONLY getElementById() verwenden, um eine Reihe von Elementen zu erhalten. Wie kann ich das machen?

Answer 1

Die ID sollte eindeutig sein, verwenden Sie stattdessen die Attribute "name" und "geteilementsbyname", und Sie haben Ihr Array.

Answer 2

Es ist illegal, mehrere Elemente mit demselben id zu haben. Die id wird als individuelle Kennung verwendet. Verwenden Sie für Elementgruppen stattdessen class und getElementsByClassName.

Answer 3

The HTML spec erforderlich, um das ID Attribut in einer Seite eindeutig zu sein:

Dieses Attribut einen Namen auf ein Element zuweist. Dieser Name muss in einem Dokument eindeutig sein.

Wenn Sie mehrere Elemente mit derselben ID haben, ist Ihr HTML nicht gültig.

So sollte getElementById() immer nur ein Element zurückgeben. Sie können nicht mehrere Elemente zurückgeben.

Es gibt ein paar verwandte Funktionen, die ein Array von Elementen zurück - getElementsByName oder getElementsByClassName, die Ihre Anforderungen besser geeignet sein können, obwohl getElementsByClassName neue 5 in HTML, die noch im Entwurf ist.

Answer 4

Sie sollten das nicht tun und selbst wenn es möglich ist, ist es nicht zuverlässig und anfällig für Probleme.

Grund ist, dass eine ID auf der Seite eindeutig ist. Sie können also nicht mehr als 1 Element auf der Seite mit derselben ID haben.

Answer 5

Warum Sie dies tun möchten, ist jenseits von mir, da id in einem Dokument eindeutig sein soll. Allerdings neigen Browser auf diese ziemlich lax sein, wenn Sie also wirklich getElementByld für diesen Zweck verwenden müssen, können Sie es wie folgt tun:

function whywouldyoudothis() { 
    var n = document.getElementById("non-unique-id"); 
    var a = []; 
    var i; 
    while(n) { 
     a.push(n); 
     n.id = "a-different-id"; 
     n = document.getElementById("non-unique-id"); 
    } 

    for(i = 0;i < a.length; ++i) { 
     a[i].id = "non-unique-id";  
    } 
    return a; 
} 

aber dieses dumme ist, und ich würde nicht trauen, dies zu arbeite für immer an allen Browsern. Obwohl die HTML-DOM-Spezifikation id als Readwrite definiert, wird sich ein validierender Browser beschweren, wenn er mehreren Elementen mit derselben ID gegenübersteht.

EDIT: Gegeben ein gültiges Dokument, könnte der gleiche Effekt dadurch erreicht werden:

function getElementsById(id) { 
    return [document.getElementById(id)]; 
} 

Answer 6

können wir document.forms verwenden [0] .Controlid

Answer 7

Wenn Sie d3 verwenden mehr für den Umgang mit Objekte mit derselben Klasse/ID

Sie können eine Untergruppe von Klassenelementen entfernen, indem Sie d3.selectAll (". classname");

Zum Beispiel verwendet das Donut-Diagramm hier auf http://medcorp.co.nz Kopien eines Bogenobjekts mit dem Klassennamen "Arc" und es gibt eine einzelne Zeile von d3, d3.selectAll (". Arc").Löschen(); um all diese Objekte zu entfernen;

mit document.getElementById ("arc"). Remove(); löscht nur ein einzelnes Element und müsste mehrmals aufgerufen werden (wie bei den obigen Vorschlägen erzeugt er eine Schleife, um die Objekte n mal zu entfernen)

Answer 8

Klasse ist mehr als genug für die Verweisung von allem, was Sie wollen, weil es haben kann eine Benennung mit einem mehr Worten:

<input class="special use"> 
<input class="normal use"> 
<input class="no use"> 
<input class="special treatment"> 
<input class="normal treatment"> 
<input class="no special treatment"> 
<input class="use treatment"> 

das ist der Weg Sie verschiedene Stile mit CSS anwenden können (und Bootstrap ist das beste Beispiel dafür) und natürlich können Sie rufen

document.getElementsByClassName("special"); 
document.getElementsByClassName("use"); 
document.getElementsByClassName("treatment"); 
document.getElementsByClassName("no"); 
document.getElementsByClassName("normal"); 

ein So weiter für jede gewünschte Gruppierung.

Jetzt, im allerletzten Fall, möchten Sie wirklich Elemente nach ID gruppieren.

<input id=1> 
<input id="+1"> 
<input id="-1"> 
<input id="1 "> 
<input id=" 1"> 
<input id="0x1"> 
<input id="1."> 
<input id="1.0"> 
<input id="01.0"> 
<input id="001"> 

Auf diese Weise können Sie, zu wissen, die numerische ID, den Zugang und ein Element erhalten, indem nur zusätzliche nicht-entkräften numerische Zeichen hinzugefügt und ruft: Sie können eine numerisch ähnliche Elemente verwendet, aber nicht gleich ID verwenden und beziehen eine Funktion, um den ursprünglichen Index von seinem erlaubten, die Zeichenkette identifizierenden Wert zu erhalten (durch Parsing usw.). Es ist nützlich, wenn Sie:

• Haben mehrere Zeilen mit ähnlichen Elementen und wollen ihre Veranstaltungen kohärent behandeln. Egal, ob Sie eine löschen oder fast alle von ihnen. Da die numerische Referenz immer noch vorhanden ist, können Sie sie wiederverwenden und ihr gelöschtes Format neu zuweisen.

• Keine Klassen-, Namen- und Tagname-IDs mehr.

Obwohl Sie auch Räume und andere gemeinsame Zeichen verwenden können, wenn es sich um eine nicht Voraussetzung ist streng in Browsern validiert, ist es nicht zu empfehlen, sie zu benutzen, besonders, wenn Sie diese Daten in andere Formate wie JSON senden werden. Sie können solche Dinge sogar mit PHP handhaben, aber das ist eine schlechte Übung, die zu schmutzigen Programmierpraktiken neigt.

Answer 9

Wie andere gesagt haben, sollten Sie nicht die gleiche ID mehr als einmal in Ihrem HTML, aber ... Elemente mit einer ID an das Dokument Objekt angebracht und Fenster auf Internet Explorer  . Siehe:

Do DOM tree elements with ids become global variables?

Wenn mehr als ein Element mit der gleichen ID existiert in Ihrem HTML, diese Eigenschaft als Array angebracht ist. Es tut mir leid, aber ich weiß nicht, wo ich hinschauen soll, wenn dies das Standardverhalten ist oder zumindest das gleiche Verhalten zwischen Browsern, was ich bezweifle.

Answer 10

Ich weiß, dass dies eine alte Frage ist und dass eine HTML-Seite mit mehreren IDs ungültig ist. Ich stieß jedoch auf diese Probleme, während ich die HTML-Dokumentation anderer APIs, die doppelte IDs (ungültiges HTML) enthielten, neu schreiben und neu formatieren musste.

Also für alle anderen, hier ist der Code, den ich verwendet, um das Problem zu umgehen querySelectorAll mit:

var elms = document.querySelectorAll("[id='duplicateID']"); 

for(var i = 0; i < elms.length; i++) 
    elms[i].style.display='none'; // <-- whatever you need to do here. 

Answer 11

document.querySelectorAll("#yourId"); gibt alle Elemente, deren ID ist yourId