HTML で重複した ID を使用するとどうなりますか?

同じ ID を持つ複数の要素: 無効への旅

ページ内の 2 つの要素が同じ ID を共有すべきではないという W3C の明確な指針にもかかわらず、不可解な現象が発生しています。複数の要素が同一の ID を持つ場合に発生します。この異常の影響を調べてみましょう。

ブラウザの動作

ブラウザは多くの場合、「フェイル サイレント」アプローチを採用し、期待どおりに無効な HTML を解釈します。したがって、無効ではありますが、同じ ID を持つ 2 つの要素を含む HTML サンプルはすべてのブラウザで機能します。

潜在的な副作用

ただし、仕様から逸脱すると、次のような扉が開きます。予期せぬ結果。たとえば、getElementById() メソッドを使用すると、指定された ID を持つ最初の要素のみが取得されます。

より安全な代替手段

同じ ID を持つ複数の要素を使用する代わりに、スタイル設定にクラス名を使用します。要素のグループ。この実践は、CSS セレクターの意図された設計に準拠しています。

同じ ID を持つ要素のクエリ

同じ ID を持つ複数の要素をどうしても選択する必要がある場合は、属性セレクターを使用できます。

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

このアプローチは、IE7 や IE7 などの古いブラウザ バージョンでは機能しない可能性があることに注意してください。

結論

ブラウザは無効な HTML に対応する可能性がありますが、そのような動作に依存しないことを強くお勧めします。一貫性と保守性を確保し、潜在的な問題を回避するために、同様の要素のスタイル設定にはクラス名を使用してください。

以上がHTML で重複した ID を使用するとどうなりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。