Können mehrere verschiedene HTML-Elemente dieselbe ID haben, wenn sie unterschiedliche Elemente sind?

139

Ist ein solches Szenario gültig?:

div#foo
span#foo
a#foo
Omninonsense
quelle
23
Obwohl dies manchmal möglich ist, ist es niemals gültig.
Paul Creasey
2
Bei alledem ist anzumerken, dass es wahrscheinlich mehrere mehrere IDs in einem Dokument mit vom Benutzeragenten erstellten Inhalten gibt (denken Sie an Frameworks, mv *, reagieren, Polymer ...). Das ist, wenn sich jemand gefragt hat, warum eine sehr professionell aussehende XYZ-Site voller Coding für schlechte Praktiken ist .
Lukasz Matysiak

Antworten:

180

Nein.

Element-IDs sollten im gesamten Dokument eindeutig sein.

SLaks
quelle
85
Was sind die Konsequenzen, wenn Sie dies nicht tun?
CorsiKa
16
@corsiKa die Folge ist undefiniertes Verhalten. Was gibt beispielsweise document.getElementById ("# foo") oder $ ("# foo") zurück, wenn mehrere #foos vorhanden sind? Sie werden auf Probleme
stoßen
76
Das ist falsch. Es ist durchaus möglich, mehrere Elemente mit derselben ID zu haben. Es ist im Allgemeinen keine bewährte Methode , wird jedoch gelegentlich verwendet. Jeder scheint zu zitieren, wie Selektoren funktionieren würden. Wenn Sie wissen, dass Sie widersprüchliche IDs haben, verwenden Sie Ihre Selektoren mit einem Elternteil, wobei die IDs unter dem Elternteil eindeutig sind. zB $('div#car span#size)und $('div#truck span#size').
BJury
18
Warum sollten Sie sogar mehrere ähnliche IDs verwenden, wenn Sie für diesen Zweck eine Klasse haben?
Max Yari
6
Ja, mehrere IDs können in der Praxis durch die Verwendung von Klassen ersetzt werden. Klassen sind jedoch dazu gedacht, Stile anzuwenden, keine Elemente zu identifizieren, wodurch der Umfang der Namen viel größer wird und sich daher wahrscheinlich überschneidet. Insbesondere bei Verwendung von Bibliotheken von Drittanbietern. Die ID als "Kennung" soll nicht multipliziert werden, daher besteht eindeutig ein Bedarf an etwas dazwischen. Die praktische Anwendung ist die Aufteilung von Abschnitten einer Seite / eines Doms in separate logische Einheiten. Die Verwendung einer (mindestens) 2-Schicht-Identifikation ist daher erforderlich.
Alen Siljak
85

Ich denke, es gibt einen Unterschied, ob etwas eindeutig sein sollte oder eindeutig sein muss (dh von Webbrowsern erzwungen wird).

Sollten IDs eindeutig sein? JA.

Müssen IDs eindeutig sein? NEIN, zumindest IE und FireFox erlauben mehreren Elementen, dieselbe ID zu haben.

Jin Kim
quelle
6
Dies gilt auch für Chrome (Version 22 zum Zeitpunkt der Erstellung dieses Kommentars). : D
Omninonsense
27
Laut Spezifikation ist dies ein MUSS, kein SOLLTE. (Funktioniert es in den meisten Browsern immer noch? Ja. Ist es gültiges HTML? Nein. Auch getElementByIddas Ergebnis in solchen Fällen ist undefined, dass es keine Möglichkeit gibt zu sagen, wie ein Browser damit umgehen könnte.)
leo
2
@leo Dies ist jedoch die reale Welt, in der Browser nicht vollständig den Standards entsprechen. In diesem Fall könnte dies eine gute Sache sein, da es keinen Grund gibt, eindeutige IDs zu erzwingen.
BJury
1
In HTML5 getElementByIddefiniert die Spezifikation für tatsächlich, dass das erste Element mit der angegebenen ID zurückgegeben werden muss (so gehen derzeit alle Browser ohnehin mit der Situation um) - siehe meine Antwort unten für weitere Informationen.
mltsy
1
Weine nicht, benutze jQuery. @leo
Máxima Alekz
67

Können mehrere Elemente dieselbe ID haben?

Ja - unabhängig davon, ob es sich um dasselbe Tag handelt oder nicht, wird die Seite von Browsern gerendert, auch wenn mehrere Elemente dieselbe ID haben.

Ist es gültiges HTML?

Nein. Dies gilt ab der HTML 5.1-Spezifikation immer noch . Die Spezifikation besagt getElementById jedoch auch, dass das erste Element mit der angegebenen ID zurückgegeben werden muss , damit das Verhalten im Fall eines ungültigen Dokuments nicht undefiniert ist.

Was sind die Konsequenzen dieser Art von ungültigem HTML?

Die meisten (wenn nicht alle) Browser haben beim Aufrufen das erste Element mit einer bestimmten ID ausgewählt und wählen es immer noch ausgetElementById . Die meisten Bibliotheken, die Elemente anhand der ID finden, erben dieses Verhalten. Die meisten (wenn nicht alle) Browser wenden auch Stile an, die von ID-Selektoren (z. B. #myid) zugewiesen wurden, auf alle Elemente mit der angegebenen ID. Wenn Sie dies erwarten und beabsichtigen, gibt es keine unbeabsichtigten Konsequenzen. Wenn Sie etwas anderes erwarten / beabsichtigen (z. B. dass alle Elemente mit dieser ID zurückgegeben werden oder der Stil nur auf ein Element angewendet wird), werden Ihre Erwartungen nicht erfüllt und alle Funktionen, die auf diesen Erwartungen beruhen, schlagen fehl.

Einige Javascript - Bibliotheken Sie haben Erwartungen , die nicht erfüllt werden , wenn mehrere Elemente haben die gleiche ID (siehe wootscootinboogie Kommentar über d3.js)

Fazit

Es ist am besten, sich an die Standards zu halten. Wenn Sie jedoch wissen, dass Ihr Code in Ihren aktuellen Umgebungen wie erwartet funktioniert und diese IDs auf vorhersehbare / wartbare Weise verwendet werden, gibt es nur zwei praktische Gründe, dies nicht zu tun:

  1. Um die Wahrscheinlichkeit zu vermeiden , dass Sie falsch sind, und eine der Bibliotheken verwenden Sie tatsächlich tut Fehlfunktion , wenn mehrere Elemente , die die gleiche ID haben.
  2. Um die Vorwärtskompatibilität Ihrer Website / Anwendung mit Bibliotheken oder Diensten (oder Entwicklern!) Zu gewährleisten, kann es in Zukunft zu Fehlfunktionen kommen, wenn mehrere Elemente dieselbe ID haben. Dies ist eine vernünftige Möglichkeit, da dies technisch nicht gültig ist HTML.

Die Macht liegt bei Ihnen!

mltsy
quelle
Hervorragende Antwort. Es ist immer am besten, wenn Sie sich an die Standards halten.
EKanadily
25

Selbst wenn die Elemente unterschiedlicher Art sind, kann dies zu ernsthaften Problemen führen ...

Angenommen, Sie haben 3 Schaltflächen mit derselben ID:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

Jetzt richten Sie einen jQueryCode ein, um etwas zu tun, wenn Sie auf myidSchaltflächen klicken:

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

Was würden Sie erwarten? Dass jede angeklickte Schaltfläche das Klickereignishandler-Setup mit jQuery ausführen würde. Leider wird es nicht passieren. NUR die 1. Schaltfläche ruft den Klick-Handler auf. Die anderen 2 tun nichts, wenn sie angeklickt werden. Es ist, als wären sie überhaupt keine Knöpfe!

Weisen Sie IDsden HTMLElementen also immer andere zu . Dies wird Sie gegen seltsame Dinge schützen. :) :)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

Wenn Sie nun möchten, dass der Klickereignishandler ausgeführt wird, wenn auf eine der Schaltflächen geklickt wird, funktioniert dies einwandfrei, wenn Sie den Selektor im jQuery-Code so ändern, dass die CSSauf sie angewendete Klasse wie folgt verwendet wird :

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});
Leniel Maccaferri
quelle
Was ist, wenn ich einen "#content" habe, auf den ich bereits in einer Variablen verwiesen habe, und einen # my-div #content, den ich nur für einige Momente habe? Danach entferne ich den referenzierten Knoten und vergesse seine Variable. Danach die # div #content führt ein myDiv.outerHTML = myDiv.innerHTML aus, um das Original zu ersetzen. Dies erspart die Notwendigkeit, alle Stile und Inhalte von #content in #decoy zu kopieren und dasselbe zu tun. Dies ist bei Übergängen sinnvoll.
Dmitry
Dies bedeutet, dass DOM, selbst wenn ich 'Anhängen' verwende, um mehrere Elemente derselben ID hinzuzufügen, nur das erste Element als real betrachtet, idealerweise 1 ID = 1 Element
Karan Kaw
22

Nein, zwei Elemente mit derselben ID sind ungültig. IDs sind eindeutig. Wenn Sie so etwas tun möchten, verwenden Sie eine Klasse. Vergessen Sie nicht, dass Elemente mehrere Klassen haben können, indem Sie ein Leerzeichen als Begrenzer verwenden:

<div class="myclass sexy"></div>
Gazler
quelle
12

Die offizielle Spezifikation für HTML besagt, dass ID-Tags eindeutig sein müssen UND die offizielle Spezifikation besagt auch, dass das Rendern abgeschlossen werden muss (dh es gibt keine "Fehler" in HTML, nur "ungültiges" HTML). Im Folgenden wird beschrieben, wie ID-Tags in der Praxis tatsächlich funktionieren . Sie sind alle ungültig , funktionieren aber immer noch:

Dies:

<div id="unique">One</div>
<div id="unique">Two</div>

Wird in allen Browsern gut gerendert. Document.getElementById gibt jedoch nur ein Objekt zurück, kein Array. Sie können das erste Div immer nur über ein ID-Tag auswählen. Wenn Sie die ID des ersten Divs mithilfe von JavaScript ändern würden, wäre die zweite ID mit document.getElementById (getestet in Chrome, FireFox und IE11) zugänglich. Sie können das div weiterhin mit anderen Auswahlmethoden auswählen, und seine ID-Eigenschaft wird korrekt zurückgegeben.

Beachten Sie, dass dieses obige Problem eine potenzielle Sicherheitslücke in Websites eröffnet, die SVG-Bilder rendern, da SVGs DOM-Elemente und auch ID-Tags enthalten dürfen (ermöglicht Skript-DOM-Weiterleitungen über hochgeladene Bilder). Solange sich die SVG im DOM vor dem zu ersetzenden Element befindet, erhält das Bild alle für das andere Element bestimmten JavaScript-Ereignisse.

Soweit ich weiß, ist dieses Problem derzeit auf keinem Radar, aber es ist real.

Dies:

<div id="unique" id="unique-also">One</div>

Auch wird in allen Browsern gut gerendert. Es wird jedoch nur die erste ID verwendet, die Sie auf diese Weise definieren, wenn Sie document.getElementById ('unique-also') ausprobiert haben. Im obigen Beispiel würden Sie null zurückgegeben (getestet auf Chrome, FireFox und IE11).

Dies:

<div id="unique unique-two">Two</div>

Im Gegensatz zu Klassen-Tags, die durch ein Leerzeichen getrennt werden können, lässt das ID-Tag jedoch Leerzeichen in allen Browsern gut zu, sodass die ID des obigen Elements tatsächlich "unique unique-two" ist und der dom nach "unique" fragt. oder "unique-two" isoliert gibt null zurück, sofern an anderer Stelle im DOM nichts anderes definiert ist (getestet in Chrome, FireFox und IE11).

Nick Steele
quelle
1
"Das ID-Tag erlaubt Leerzeichen" - Obwohl der Wert laut Spezifikation keine Leerzeichen enthalten darf.
MrWhite
Genau. Es gibt jedoch die Spezifikation und die Funktionsweise der Browser. Browser behandeln die Spezifikation in der Vergangenheit als ein Ziel, waren jedoch bei vielen Elementen nicht streng. Ich denke, sie tun dies, denn wenn sie die Spezifikation erfüllen würden, würden viele bestehende Websites oder ähnliches beschädigt. Ich erwähne oben, dass diese Dinge zwar funktionieren, aber ungültig sind.
Nick Steele
5

Die Antwort von SLaks ist korrekt, aber als Ergänzung ist zu beachten, dass die x / html-Spezifikationen angeben, dass alle IDs innerhalb eines (einzelnen) HTML-Dokuments eindeutig sein müssen . Obwohl es nicht genau das ist, was die Operation verlangt hat, kann es gültige Fälle geben, in denen dieselbe ID auf mehreren Seiten an verschiedene Entitäten angehängt wird.

Beispiel:

(für moderne Browser) Artikel # Hauptinhalt {in eine Richtung gestylt }
(für Legacy bereitgestellt) div # Hauptinhalt {in eine andere Richtung gestylt }

Wahrscheinlich ein Antimuster. Ich verlasse hier nur als Anwalt des Teufels.

RobW
quelle
1
Guter Punkt. Obwohl der dynamisch generierte Inhalt, der in eine andere Seite eingefügt werden soll, IDs insgesamt vermeiden sollte. IDs sind wie Globale in Programmiersprachen, Sie können sie verwenden, und es gibt gültige Fälle, in denen es ein netter Hack ist, der die Dinge vereinfacht. Es ist eine gute Übung, Dinge richtig zu machen, bevor Sie Hacks machen.
Psycho Brm
4

Und für Chrome 26.0.1410.65, Firefox 19.0.2 und Safari 6.0.3 geben jquery-Selektoren (zumindest) das erste Element mit dieser ID zurück, wenn Sie mehrere Elemente mit derselben ID haben.

z.B

<div id="one">first text for one</div>
<div id="one">second text for one</div>

und

alert($('#one').size());

Einen Test finden Sie unter http://jsfiddle.net/RuysX/ .

Denishaskin
quelle
Es sei denn, Sie verwenden einen komplexeren Selektor wie " div#oneDas ändert natürlich nichts an der Tatsache, dass er ungültig ist."
Kevin B
Möglicherweise ist diese Antwort wahr, ich sage dies aus Erfahrung.
Dibyanshu Jaiswal
4

Nun, mit dem HTML - Validator an w3.org , die spezifisch für HTML5, IDs muß eindeutig sein

Folgendes berücksichtigen...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">Barry</div>
        <div id="x">was</div>
        <div id="x">here</div>
    </body>
</html>

Der Validator antwortet mit ...

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... aber das OP hat ausdrücklich angegeben - was ist mit verschiedenen Elementtypen? Betrachten Sie also den folgenden HTML-Code ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">barry
            <span id="x">was here</span>
        </div>
    </body>
</html>

... das Ergebnis des Validators ist ...

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

Fazit:

In beiden Fällen (gleicher Elementtyp oder anderer Elementtyp) wird die ID nicht als gültiges HTML5 angesehen, wenn sie mehrmals verwendet wird.

Barrypicker
quelle
2

Wir können den Klassennamen anstelle der ID verwenden. HTML-IDs sollten eindeutig sein, Klassen jedoch nicht. Beim Abrufen von Daten unter Verwendung des Klassennamens kann die Anzahl der Codezeilen in Ihren js-Dateien verringert werden.

$(document).ready(function ()
{
    $(".class_name").click(function ()
    {
        //code
    });
});

Malith Ileperuma
quelle
1

Ich denke, Sie können es nicht tun, weil ID eindeutig ist. Sie müssen es für ein Element verwenden. Sie können class für diesen Zweck verwenden

Janaravi
quelle
1

<div id="one">first text for one</div>
<div id="one">second text for one</div>

var ids = document.getElementById('one');

IDs enthalten nur das erste div-Element. Selbst wenn mehrere Elemente mit derselben ID vorhanden sind, gibt das Dokumentobjekt nur die erste Übereinstimmung zurück.

Ganesh Phirke
quelle
0

Nein, IDs müssen eindeutig sein. Zu diesem Zweck können Sie Klassen verwenden

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}
Phihag
quelle
0

Ist es möglich, mehr als einen Schüler in einer Klasse mit derselben Roll- / ID-Nummer zu haben? Im HTML- idAttribut ist das so. Sie können dieselbe Klasse für sie verwenden. z.B:

<div class="a b c"></div>
<div class="a b c d"></div>

Und so weiter.

thecodeparadox
quelle
0

Normalerweise ist es besser, dieselbe ID nicht mehrmals auf einer HTML-Seite zu verwenden. Trotzdem ist es möglich, dieselbe ID mehrmals auf einer Seite zu verwenden. Wenn Sie jedoch eine ID als Teil der URI / URL wie folgt verwenden:

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

Und wenn die ID ('2015_FIFA_corruption_case') nur für ein (span) Element auf der Webseite verwendet wird:

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

Es würde kein Problem geben. Im Gegenteil, dieselbe ID existiert an mehr als einer Stelle, der Browser wäre verwirrt.

Park JongBum
quelle
0

Ja, sie können.

Ich weiß nicht, ob all diese Antworten veraltet sind, aber öffne einfach YouTube und inspiziere das HTML. Wenn Sie versuchen, die vorgeschlagenen Videos zu überprüfen, werden Sie feststellen, dass sie alle dieselbe ID und Wiederholungsstruktur haben:

<span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL">
Der Bestrafer
quelle