同じid属性を持つ2つのHTML要素：どれほど悪いのでしょうか？

Googleマップのソースコードを参照するだけです。ヘッダーには、id = "search"の2つのdivがあり、一方にはもう一方が含まれ、jstrack = "1"属性もあります。次のようにそれらを分離するフォームがあります：

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

これはグーグルなので、間違いではないと思います。

それでは、このルールに違反することは本当にどれほど悪いことなのでしょうか？CSSとDOMの選択に注意している限り、クラスのようなIDを再利用してみませんか？誰かがこれを意図的に行っていますか？

仕様にはUNIQUEと書かれています

HTML 4.01仕様では、IDはドキュメント全体で一意である必要があるとされています。

HTML 5仕様は同じことを言っていますが、言い換えれば。それはIDがホームサブツリーでユニークでなければならないと言います、私たちがそれの定義を読むなら基本的にドキュメントです。

重複を避ける

しかし、HTMLレンダラーはHTMLレンダリングに関して非常に寛容なので、重複IDを許可します。これは可能な限り回避し、JavaScriptでIDを使用してプログラムで要素にアクセスする場合は厳密に回避する必要があります。getElementById複数の一致する要素が見つかったときにどの関数が返されるべきかわかりませんか？すべきか：

• エラーを返しますか？
• 最初に一致する要素を返しますか？
• 最後に一致した要素を返しますか？
• 一致する要素のセットを返しますか？
• 何も返さない？

ただし、最近ブラウザが確実に動作する場合でも、仕様に反するため、将来この動作を保証することはできません。そのため、同じドキュメント内でIDを重複させないことをお勧めします。

あなたは「どれほど悪い」と尋ねました。@RobertKoritnikの（完全に正確な）答えを少し具体化するには...

そのコードは間違っています。不正確なものはグレーの色合いではありません。このコードは標準に違反しているため、正しくありません。検証チェックに失敗するため、そうする必要があります。

とは言っても、現在市場に出回っているブラウザはそれについて文句を言うことも、問題を起こすこともありません。ブラウザはそれについて文句を言う権利の範囲内にありますが、現在のバージョンのどれも現在のところそうではありません。これは、将来のバージョンでこのコードが不適切に扱われない可能性があることを意味するものではありません。

cssまたはjavascriptでセレクタとしてそのIDを使用しようとするあなたの動作は推測できず、おそらくブラウザによって異なります。各ブラウザがそれに対してどのように反応するかを調べるための調査ができると思います。最良の場合、「class =」のように扱い、それらのリストを選択すると思います。（ただし、JavaScriptライブラリを混乱させる可能性があります.jQueryの作成者であれば、セレクターコードを最適化して、「＃」で始まるセレクターを使用して1つのオブジェクトを取得し、リストは私を完全に困らせるかもしれません。）

また、最初の1つ、場合によっては最後の1つを選択することも、どれも選択しないことも、ブラウザーを完全にクラッシュさせることもあります。それを試さずに伝える方法はありません。

「どれほど悪い」かは、特定のブラウザがHTML仕様をどの程度厳密に実装しているか、そしてその仕様の違反に直面したときに何をするかに完全に依存します。

編集：私はちょうど今日偶然これに出くわした。さまざまな種類のエンティティの検索フォームからさまざまなコンポーネントを取得して、このサイト用の優れた大きなオールインワンレポートユーティリティを作成します。リモートページの検索フォームを非表示のdivにロードし、それらを適切なエンティティタイプがレポートのソースとして選択された場合のレポートジェネレーター。したがって、フォームの非表示バージョンと、レポートジェネレーターに表示されるバージョンがあります。付属のJavaScriptは、すべての場合において、IDで要素を参照します。IDの要素には、現在2つのページがあります（非表示の要素と表示されている要素）。

jQueryが実行していると思われるのは、最初の1つを選択することです。これは、すべての場合において、私が望んでいないものです。

この問題を回避するには、フィールドを取得するページの領域を指定するセレクターを作成します（例：$（ '＃containerDiv #specificElement'））。しかし、あなたの質問に対する答えが1つあります。ChromeのjQueryは、この仕様違反に直面したとき、確実に特定の動作をします。

それは本当にどれほど悪いですか？

1. 泣かせる
2. 無効です
3. 多くのjavascriptライブラリは期待どおりに動作しません
4. あなたのコードを混乱させます

経験によれば、主要なブラウザーのgetElementByIdは、ドキュメント内で最初に一致した要素を返します。しかし、これは将来的には常にそうではないかもしれません。

jQueryにID（例：#foo）が与えられると、getElementByIdを使用し、その動作を模倣します。これを回避する必要がある場合（悲しいことに）、$（ " * #foo"）を使用してjQueryにgetElementsByTagNameを使用させ、一致するすべての要素のリストを返すように説得することができます。

私は他のサイト用のコードを頻繁に書かなければならず、これを回避しなければなりません。公正な世界では、IDが一意であるかどうかを確認することから始めるために、関数を再設計する必要はありません。IDは常に一意である必要があります。世界は残酷であり、それが私が泣く理由です。

あなたは非常に多くのことを行うことができます-しかし、それはあなたがすべきだという意味ではありません。

プログラマー（一般的に言えば）として、私たちは正確で規則に従うことで生活を築きます-ここに、従うのが簡単で、それが私たちがすることのかなり基本的な規則があります-私たちは与えられた範囲内の一意の識別子が好きです...

ブラウザーがあまりにも順応性が高いため、ルールを破ることはできますが、ブラウザーが整形式で有効なHTMLの必要性に厳しい場合は、実際にはすべての方が良いでしょう。返済されました！

それで、本当にそんなに悪いのでしょうか？プログラマーとして、どうすれば尋ねることができますか？その文明に対する犯罪（-：

補遺：

あなたは、それは悪いことのようにブラウザがあまりにも収容されていると書いています

私はそうです-複雑なルールについて話しているのではなく、物事を適切に形成することと、機械的にテストでき、結果を機械的に処理しやすくするルールを適用することについて実質的に話している ブラウザーが厳格であれば、ツールはそれをサポートするように非常に迅速に適応していました-そうではなかったので、代わりにその失敗を悪用する程度まで。考えてみてください-引用テキストを明示的にサポートするはるかに複雑でない「電子メールマークアップ言語」がはるかに優れたツールを提供してくれたときに、MSとNetscapeが無制限のHTMLを許可することでメールを邪魔しなかったなら、電子メールははるかに優れた媒体だったでしょう...しかし、その船は航海し、同様に我々はできる）が必要ですが、できません

In Scripting：getElementByID最初の一致のみを返します。CSSの場合：#idそのIDを持つすべての要素に影響します。ブラウザでは、レンダリングは効果がありません。

これはw3c標準の動作です。可能性のあるものではなく、事実上定義されたものです。

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