Zwei HTML-Elemente mit demselben ID-Attribut: Wie schlimm ist es wirklich?

Durchsuchen Sie einfach den Google Maps-Quellcode. In ihrer Kopfzeile haben sie 2 Divs mit id = "search", eine enthält die andere, und sie haben auch das Attribut jstrack = "1". Es gibt eine Form, die sie so trennt:

<div id="search" jstrack="1">
    <form action="/maps" id="...rest isn't important">
        ...
        <div id="search">...

Da dies Google ist, gehe ich davon aus, dass es kein Fehler ist.

Wie schlimm kann es also wirklich sein, gegen diese Regel zu verstoßen? Solange Sie bei der Auswahl von CSS und Dom vorsichtig sind, können Sie ids wie Klassen wiederverwenden. Tut dies jemand absichtlich und wenn ja, warum?

Spezifikation sagt EINZIGARTIG

Gemäß der HTML 4.01-Spezifikation muss die ID dokumentweit eindeutig sein.

Die HTML 5-Spezifikation sagt dasselbe, aber mit anderen Worten. Es besagt, dass ID in seinem Heimat-Teilbaum eindeutig sein muss , was im Grunde genommen das Dokument ist, wenn wir dessen Definition lesen .

Vermeide Dopplungen

Da HTML-Renderer in Bezug auf HTML-Rendering jedoch sehr nachsichtig sind, lassen sie doppelte IDs zu. Dies sollte nach Möglichkeit vermieden werden und beim programmgesteuerten Zugriff auf Elemente durch IDs in JavaScript unbedingt vermieden werden . Ich bin nicht sicher, welche getElementByIdFunktion zurückgegeben werden soll, wenn mehrere übereinstimmende Elemente gefunden werden? Sollte es:

• Einen Fehler zurückgeben?
• Erstes passendes Element zurückgeben?
• Letztes passendes Element zurückgeben?
• eine Reihe von übereinstimmenden Elementen zurückgeben?
• nichts zurückgeben?

Aber selbst wenn Browser heutzutage zuverlässig funktionieren, kann niemand dieses Verhalten in Zukunft garantieren, da dies der Spezifikation widerspricht. Aus diesem Grund empfehle ich, dass Sie niemals IDs innerhalb desselben Dokuments duplizieren .

Sie fragten "wie schlimm". Also, um @ RobertKoritniks (vollkommen genaue) Antwort ein wenig zu präzisieren ...

Dieser Code ist falsch. Falsch kommt nicht in Graustufen. Dieser Code verstößt gegen den Standard und ist daher falsch. Die Validierungsprüfung würde fehlschlagen, und das sollte auch so sein.

Das heißt, kein Browser auf dem Markt würde sich darüber beschweren oder überhaupt ein Problem damit haben. Browser hätten das Recht , sich darüber zu beschweren, aber keine der aktuellen Versionen von ihnen tut dies derzeit. Dies bedeutet nicht, dass zukünftige Versionen diesen Code möglicherweise nicht schlecht behandeln.

Ihr Verhalten, wenn Sie versuchen, diese ID als Selektor in CSS oder Javascript zu verwenden, ist nicht zu erraten und variiert wahrscheinlich von Browser zu Browser. Ich nehme an, dass eine Studie durchgeführt werden könnte, um zu sehen, wie jeder Browser darauf reagiert. Ich denke, im besten Fall würde es wie "class =" behandelt und die Liste ausgewählt. (Dies könnte jedoch die JavaScript - Bibliotheken verwirren. Wenn ich der Autor von jQuery wäre, hätte ich möglicherweise meinen Auswahlcode so optimiert, dass ich ein einzelnes Objekt erwarte und ein Liste könnte mich komplett verpfuschen.)

Es kann auch das erste oder möglicherweise das letzte oder keines davon auswählen oder den Browser vollständig zum Absturz bringen. Keine Möglichkeit zu sagen, ohne es zu versuchen.

"Wie schlecht" hängt dann ganz davon ab, wie streng ein bestimmter Browser die HTML-Spezifikation implementiert und was er tut, wenn er mit einer Verletzung dieser Spezifikation konfrontiert wird.

EDIT: Das habe ich gerade heute gesehen. Ich rufe verschiedene Komponenten von Suchformularen auf verschiedenen Arten von Entitäten ab, um ein großartiges All-in-One-Berichtsdienstprogramm für diese Site zu erstellen. Ich lade die Suchformulare der Remote-Seiten in versteckten Divs hoch und füge sie in meine ein Berichtsgenerator, wenn der entsprechende Entitätstyp als Quelle für den Bericht ausgewählt wurde. Es gibt also eine versteckte Version des Formulars und eine Version, die im Berichtsgenerator angezeigt wird. Das mitgelieferte JavaScript bezieht sich in jedem Fall auf Elemente nach ID, von denen sich jetzt ZWEI auf der Seite befinden - das versteckte und das angezeigte.

Was jQuery zu tun scheint, ist, mich als ERSTEN auszuwählen, was in jedem Fall genau das ist, was ich NICHT will.

Ich arbeite daran, indem ich Selektoren schreibe, um den Bereich der Seite anzugeben, in den ich mein Feld einfügen möchte (dh: $ ('# containerDiv #specificElement')). Aber es gibt eine Antwort auf Ihre Frage: jQuery auf Chrome verhält sich bei dieser Verletzung der technischen Daten auf jeden Fall anders.

Wie schlimm ist es wirklich?

1. Das bringt mich zum Weinen
2. Es ist ungültig
3. Viele Javascript-Bibliotheken funktionieren nicht wie erwartet
4. Es macht Ihren Code verwirrend

Erfahrungsgemäß gibt getElementById in gängigen Browsern das erste übereinstimmende Element im Dokument zurück. Dies ist in Zukunft jedoch möglicherweise nicht immer der Fall.

Wenn jQuery eine ID, z. B. #foo, erhält, verwendet es getElementById und ahmt dieses Verhalten nach. Wenn Sie das umgehen müssen (das ist traurig), können Sie $ (" * #foo") verwenden, was jQuery davon überzeugt, getElementsByTagName zu verwenden und eine Liste aller übereinstimmenden Elemente zurückzugeben.

Ich muss oft Code für andere Sites schreiben und das muss ich umgehen. In einer gerechten Welt müsste ich Funktionen nicht neu gestalten, um zunächst zu überprüfen, ob eine ID eindeutig ist. IDs sollten immer eindeutig sein. Die Welt ist grausam und deshalb weine ich.

Sie können sehr viele Dinge tun - aber das bedeutet nicht, dass Sie sollten.

Als Programmierer (im Allgemeinen) bauen wir unser Leben darauf, präzise zu sein und die Regeln zu befolgen - hier ist eine Regel, die einfach zu befolgen ist, die ziemlich grundlegend für unser Handeln ist - wir mögen (abhängig von) eindeutigen Bezeichnern innerhalb eines bestimmten Bereichs ...

Die Regel zu brechen ist etwas, das wir tun können, weil der Browser viel zu entgegenkommend ist - aber wirklich, wir alle wären besser dran, wenn die Browser strikt darauf bedacht wären, wohlgeformtes und gültiges HTML zu benötigen zurückgezahlt worden!

Also ist es wirklich so schlimm? Wie kann man als Programmierer überhaupt fragen? Es ist ein Verbrechen gegen die Zivilisation (-:

Nachtrag:

Sie schreiben, dass Browser zu entgegenkommend sind, als dass es eine schlechte Sache wäre

Ich tue es, weil es so ist - wir reden nicht über komplizierte Regeln, wir reden wesentlich darüber, Dinge gut zu formen und auf andere Weise Regeln anzuwenden, die mechanisch getestet werden können und die wiederum die mechanische Verarbeitung des Ergebnisses erleichtern. Wenn die Browser streng gewesen wären, hätten sich die Tools sehr schnell darauf eingestellt - das war nicht der Fall, manche in dem Maße, in dem sie diesen Fehler ausnutzen. Denken Sie nur einmal darüber nach - E-Mails wären ein viel besseres Medium gewesen, wenn MS und Netscape nicht uneingeschränktes HTML zugelassen hätten, wenn eine weitaus weniger komplexe "E-Mail-Auszeichnungssprache" mit expliziter Unterstützung für zitierten Text uns ein weitaus besseres Werkzeug gegeben hätte ... aber das Schiff ist gesegelt und in ähnlicher Weise können wir 'sollte haben ), aber wir können nicht

In Scripting: getElementByIDGibt nur die erste Übereinstimmung zurück. In CSS: #idBetrifft ALLE Elemente mit dieser ID. Im Browser hat Render keine Auswirkung.

Dies ist das Verhalten des W3C-Standards. Kein möglicher, sondern der faktisch definierte.

https://dom.spec.whatwg.org/#interface-nonelementparentnode