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

Ist ein solches Szenario gültig?:

div#foo
span#foo
a#foo

Nein.

Element-IDs sollten im gesamten Dokument eindeutig sein.

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.

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!

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

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>

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).

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.

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/ .

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.

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

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

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

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

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.

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.

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