Rajan P
Wie kann ich eine Sammlung von Elementen erhalten, indem ich ihre id Attribut? Ich möchte den Namen aller Tags erhalten, die dasselbe haben id im html.
Ich möchte NUR verwenden getElementById() um ein Array von Elementen zu erhalten. Wie kann ich das machen?
Oded
Die HTML-Spezifikation erfordert die id Attribut, das auf einer Seite eindeutig sein soll:
[T]Der Wert des ID-Attributs muss unter allen IDs in der Baumstruktur des Elements eindeutig sein
Wenn Sie mehrere Elemente mit derselben ID haben, ist Ihr HTML nicht gültig.
Damit, document.getElementById sollte immer nur ein Element zurückgeben. Sie können nicht mehrere Elemente zurückgeben.
Es gibt ein paar verwandte Funktionen, die eine Liste von Elementen zurückgeben: getElementsByName oder getElementsByClassName die Ihren Anforderungen möglicherweise besser entsprechen.
Stimme auch von mir ab, class ist semantisch besser als name, die hier nicht korrekt verwendet wird. Ich glaube das name funktioniert nur für form Elemente. Auch der eigentliche Zweck von name besteht darin, die Namen der Abfrageattribute zu benennen, wenn sie an den Server gesendet werden. Die einzige Zeit, in der sie für mehrere Elemente verwendet werden sollten, ist das Gruppieren von Optionsfeldern.
– Delan Azabani
31. August 2010 um 10:07 Uhr
@Delan Azabani – im Zusammenhang mit der Frage ist unklar, ob beides der Fall ist getElementsByName oder getElementsByClassName sind geeignete Lösungen. Ich habe einige Details zu beiden hinzugefügt.
– Oded
31. August 2010 um 10:32 Uhr
@Oded Ich versuche, getElementsByName(“tags”).style.opacity=’1′ zu tun; aber ich kann das nicht.. bitte helft mir
– Optimus Prime
13. April 2013 um 16:49 Uhr
Es ist cool, den Leuten zu sagen, dass sie gegen das Meta vorgehen, aber Sie können nutzlose Frameworks wie WordPress erhalten, die eine Seite mit mehreren IDs mit demselben Namen füllen. Geben Sie beim nächsten Mal einfach die Antwort und sagen Sie dann, warum diese Antwort scheiße ist. Denn am Ende des Tages, wenn die Frage keine funktionierende Lösung hat, ist die Antwort, die besagt, dass sie gegen das Meta gehen, nicht gut.
– jemiloii
17. Februar 2014 um 23:43 Uhr
Primefaces generieren manchmal doppelte IDs von Elementen für den Dialog, wenn Sie sie an body anhängen. Vielleicht ist es eine Kombination aus Datentabelle in Widgets und Ajax-Prozedur, die den Dialog bei der Zeilenauswahl öffnet. Das mehrmals gesehen. Dokument wird OK angezeigt, letzter Dialog ist sichtbar und alle anderen mit derselben ID sind ausgeblendet.
– Zivko
8. Juni 2016 um 7:38 Uhr
Ich weiß, dass dies eine alte Frage ist und dass eine HTML-Seite mit mehreren IDs ungültig ist. Ich bin jedoch auf dieses Problem gestoßen, als ich die HTML-Dokumentation einer anderen API, die doppelte IDs (ungültiges HTML) enthielt, kratzen und neu formatieren musste.
Also für alle anderen, hier ist der Code, mit dem ich das Problem umgangen habe querySelectorAll:
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.
Das hat mich auch gerettet, danke! IMHO ist die Frage sehr gültig: Ich habe diesen Fall, in dem eine Schaltfläche an eine andere Stelle im DOM-Baum verschoben wird und dann eine teilweise Aktualisierung des Baums eine neue Schaltfläche mit derselben ID neu lädt. In diesem Fall muss ich den alten Knopf entfernen und durch den neuen ersetzen.
– D.Bugger
9. April 2018 um 22:27 Uhr
document.querySelectorAll("#duplicateID") scheint auch zu funktionieren.
– Jespertheend
31. März 2020 um 13:22 Uhr
Mit Jquery, $('[id^=duplicateID]').hide(); könnte alles ersetzen
– Wouter Vanherck
16. November 2020 um 13:27 Uhr
Paul Metzger
Warum Sie dies tun möchten, ist mir ein Rätsel, da id in einem Dokument eindeutig sein soll. Allerdings neigen Browser dazu, ziemlich nachlässig zu sein, wenn Sie also wirklich getElementById für diesen Zweck verwenden müssen, können Sie es so machen:
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;
}
Das ist jedoch albern, und ich würde nicht darauf vertrauen, dass dies für alle Browser für immer funktioniert. Obwohl die HTML-DOM-Spezifikation id als readwrite definiert, wird sich ein validierender Browser beschweren, wenn er mit mehr als einem Element mit derselben ID konfrontiert wird.
BEARBEITEN: Bei einem gültigen Dokument könnte der gleiche Effekt so erzielt werden:
function getElementsById(id) {
return [document.getElementById(id)];
}
In der Tat ein dummer Workaround. Aber warum definieren Sie eine Wrapper-Funktion um document.getElementById in Ihrem hinzugefügten Teil? Das ist völlig nutzlos (außer der Verwendung eines kürzeren Alias wie $ um dasselbe zu erreichen).
– Marcel Korpel
31. August 2010 um 10:22 Uhr
Die spezifische Anforderung des OP besteht darin, ein Array von Elementen zu erhalten. document.getElementById gibt nur ein Element zurück (nicht in einem Array), meine Funktion getElementsById gibt ein Array zurück, das alle Elemente mit einer gegebenen ID in einem gültigen Dokument enthält.
– Paul Metzger
31. August 2010 um 10:25 Uhr
+1 für die Lösung – obwohl es gegen die Spezifikation verstößt, ist es eine unvollkommene Welt, und ich musste dies für ein Projekt tun, das ich geerbt habe.
– Wex
18. Oktober 2011 um 16:04 Uhr
genau das was ich brauchte. Ich rufe eine ASPX-Seite auf, die einen Repeater verwendet, der ein Zahlenfeld enthält. Ich rufe dann eine Javascript-Funktion auf, die dieses Zahlenfeld in einen Code-39-Barcode umwandelt, wobei nur HTML und CSS verwendet werden, um zu vermeiden, dass ein grafisches Bild verwendet werden muss. Da die Gesamtzahl dieser Felder dynamisch generiert wird und zwischen 1 und 1000 variieren kann, musste ich ein Array verwenden. Oder besser gesagt, der Aufruf von GetElementByID gibt automatisch ein Array zurück, wenn es mehrere Elemente mit derselben ID in IE, Chrome, Safari und Opera gibt, ABER nicht in Firefox. Und natürlich bestand mein Kunde auf Firefox-Kompatibilität
– Benutzer1490356
29. Juni 2012 um 5:45 Uhr
-1, da die Lösung von Brad Bamford moderner und weniger hackig erscheint und nicht alle geänderten ID-Werte bereinigen muss (falls dies erforderlich sein sollte).
– frog.ca
19. September 2019 um 14:18 Uhr
document.querySelectorAll("#yourId"); gibt alle Elemente zurück, deren ID ist yourId
Es ist illegal, mehrere Elemente mit demselben zu haben id. Die id wird als individuelle Kennung verwendet. Verwenden Sie für Gruppen von Elementen classund getElementsByClassName stattdessen.
Die meisten Elemente unterstützen kein Namensattribut, daher ist dies kein sehr praktischer Vorschlag. Eine Klasse ist eine Gruppe von Dingen, die etwas gemeinsam haben. Wenn sich jemand mit JS ein Bündel Dinge schnappen will, dann müssen sie etwas gemeinsam haben. Klasse ist also eine Ausgezeichnet Wahl dazu. es ist nicht ein Attribut, das ausschließlich zum Aufhängen von CSS dient. Das einzige Problem ist die eingeschränkte Browserunterstützung für getElementsByClassName, aber es gibt browserübergreifende Implementierungen davon (einschließlich eigenständiger und in YUI und jQuery).
– QUentin
31. August 2010 um 8:39 Uhr
@Noon Silk: Das Klassenelement wurde zu Identifikationszwecken entwickelt. So dass es sollte nicht nicht zur Identifizierung verwendet werden. Die HTML4-Spezifikation sagt: The class attribute has several roles in HTML: 1-As a style sheet selector. 2-For general purpose processing by user agents.. Verwenden class zur Identifikation ist ein durchaus gültiger Ansatz – dafür war er gedacht!
– Schlafmann
31. August 2010 um 8:49 Uhr
@Noon Silk – David hat nicht nach einem Argument gefragt, sondern nur nach einer Erklärung. Sich zu weigern, etwas mit jemandem zu besprechen, ist kein guter Weg, um ihn davon zu überzeugen, deiner Meinung zuzustimmen. (Naja, das ist jedenfalls meine Meinung)
– Belugabob
31. August 2010 um 9:52 Uhr
belugabob: nicht so sehr. Es ist keine Frage der Meinung, ob name ist ein gültiges Attribut für die meisten Elemente: Es ist einfach nicht so, also scheint Noon Silk es zu leugnen.
– Tim unten
31. August 2010 um 10:06 Uhr
Ist das nicht der ganze Sinn von StackOverflow – eine ganze Reihe von Meinungen und Ideen zu bündeln, damit andere daraus lernen können?
– Belugabob
31. August 2010 um 11:31 Uhr
remi bourgarel
Die ID soll eindeutig sein, verwenden Sie stattdessen das Attribut “name” und “getelementsbyname”, und Sie haben Ihr Array.
Die meisten Elemente unterstützen kein Namensattribut, daher ist dies kein sehr praktischer Vorschlag. Eine Klasse ist eine Gruppe von Dingen, die etwas gemeinsam haben. Wenn sich jemand mit JS ein Bündel Dinge schnappen will, dann müssen sie etwas gemeinsam haben. Klasse ist also eine Ausgezeichnet Wahl dazu. es ist nicht ein Attribut, das ausschließlich zum Aufhängen von CSS dient. Das einzige Problem ist die eingeschränkte Browserunterstützung für getElementsByClassName, aber es gibt browserübergreifende Implementierungen davon (einschließlich eigenständiger und in YUI und jQuery).
– QUentin
31. August 2010 um 8:39 Uhr
@Noon Silk: Das Klassenelement wurde zu Identifikationszwecken entwickelt. So dass es sollte nicht nicht zur Identifizierung verwendet werden. Die HTML4-Spezifikation sagt: The class attribute has several roles in HTML: 1-As a style sheet selector. 2-For general purpose processing by user agents.. Verwenden class zur Identifikation ist ein durchaus gültiger Ansatz – dafür war er gedacht!
– Schlafmann
31. August 2010 um 8:49 Uhr
@Noon Silk – David hat nicht nach einem Argument gefragt, sondern nur nach einer Erklärung. Sich zu weigern, etwas mit jemandem zu besprechen, ist kein guter Weg, um ihn davon zu überzeugen, deiner Meinung zuzustimmen. (Naja, das ist jedenfalls meine Meinung)
– Belugabob
31. August 2010 um 9:52 Uhr
belugabob: nicht so sehr. Es ist keine Frage der Meinung, ob name ist ein gültiges Attribut für die meisten Elemente: Es ist einfach nicht so, also scheint Noon Silk es zu leugnen.
– Tim unten
31. August 2010 um 10:06 Uhr
Ist das nicht der ganze Sinn von StackOverflow – eine ganze Reihe von Meinungen und Ideen zu bündeln, damit andere daraus lernen können?
– Belugabob
31. August 2010 um 11:31 Uhr
Gemeinschaft
Wie andere gesagt haben, sollten Sie dieselbe ID nicht mehr als einmal in Ihrem HTML haben, aber … Elemente mit einer ID werden an die angehängt dokumentieren Objekt und zu Fenster im InternetExplorer. Beziehen auf:
Werden DOM-Baumelemente mit IDs zu globalen Variablen?
Wenn mehr als ein Element mit derselben ID in Ihrem HTML vorhanden ist, wird diese Eigenschaft als Array angehängt. Es tut mir leid, aber ich weiß nicht, wo ich suchen soll, ob dies das Standardverhalten ist oder ob Sie zumindest das gleiche Verhalten zwischen den Browsern erhalten, was ich bezweifle.
Wie können HTML-Elemente dieselbe ID haben??? Verwenden Sie stattdessen die Klasse.
– Q_Mlilo
31. August 2010 um 9:18 Uhr
Für einen legitimen Anwendungsfall verwende ich möglicherweise JS, um Code in der Konsole auf einer Website auszuführen, die ich nicht selbst entwickelt habe.
– apnorton
4. Januar 2018 um 23:51 Uhr