Was passiert, wenn Sie doppelte IDs in HTML verwenden?

Mehrere Elemente mit derselben ID: Eine Reise in die Ungültigkeit

Trotz der klaren Anweisung des W3C, dass keine zwei Elemente auf einer Seite dieselbe ID haben sollten, ein rätselhaftes Phänomen entsteht, wenn mehrere Elemente identische IDs besitzen. Lassen Sie uns die Auswirkungen dieser Anomalie untersuchen.

Browserverhalten

Browser verfolgen oft einen „stillschweigenden“ Ansatz und interpretieren ungültiges HTML so, dass es ihren Erwartungen entspricht. Obwohl es ungültig ist, funktioniert das HTML-Beispiel mit zwei Elementen mit derselben ID in allen Browsern.

Potenzielle Nebenwirkungen

Wenn Sie jedoch von der Spezifikation abweichen, öffnen Sie die Tür zu unvorhergesehene Folgen. Wenn Sie beispielsweise die Methode getElementById() verwenden, wird nur das erste Element mit der angegebenen ID abgerufen.

Eine sicherere Alternative

Anstatt mehrere Elemente mit derselben ID zu verwenden, verwenden Sie Klassennamen für das Styling Gruppen von Elementen. Diese Vorgehensweise entspricht dem beabsichtigten Design von CSS-Selektoren.

Elemente mit derselben ID abfragen

Wenn Sie unbedingt mehrere Elemente mit derselben ID auswählen müssen, können Sie auf Attributselektoren zurückgreifen:

document.querySelectorAll('p[id="red"]');

Beachten Sie, dass dieser Ansatz in älteren Browserversionen wie IE7 und möglicherweise nicht funktioniert unten.

Fazit

Obwohl Browser möglicherweise ungültiges HTML unterstützen, wird dringend davon abgeraten, sich auf ein solches Verhalten zu verlassen. Aus Gründen der Konsistenz und Wartbarkeit und zur Vermeidung potenzieller Probleme verwenden Sie Klassennamen für die Gestaltung ähnlicher Elemente.

Das obige ist der detaillierte Inhalt vonWas passiert, wenn Sie doppelte IDs in HTML verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!