異なる要素である場合、複数の異なるHTML要素が同じIDを持つことができますか？

このようなシナリオは有効ですか？：

div#foo
span#foo
a#foo

番号。

要素IDはドキュメント全体で一意である必要があります。

何かが一意である必要があるのか​​、または一意である必要があるのか​​（つまり、Webブラウザによって強制される）には違いがあると思います。

IDは一意である必要がありますか？はい。

IDは一意である必要がありますか？いいえ、少なくともIEとFireFoxでは、複数の要素が同じIDを持つことができます。

複数の要素が同じIDを持つことはできますか？

はい-同じタグであるかどうかにかかわらず、複数の要素が同じIDを持っている場合でも、ブラウザはページをレンダリングします。

有効なHTMLですか？

いいえ。これはHTML 5.1仕様の時点でも当てはまります。ただし、仕様では、指定されたIDの最初の要素をgetElementById 返す必要があることも述べているため、無効なドキュメントの場合の動作は未定義ではありません。

このタイプの無効なHTMLの影響は何ですか？

ほとんどの（すべてではないにしても）ブラウザは、を呼び出したときに、指定されたIDの最初の要素を選択していますgetElementById。IDで要素を検索するほとんどのライブラリは、この動作を継承します。ほとんどの（すべてではないにしても）ブラウザは、id-selectors（egなど#myid）によって割り当てられたスタイルを、指定されたIDを持つすべての要素に適用します。これがあなたが期待して意図していることであれば、意図しない結果はありません。他のものを期待する/意図する場合（たとえば、そのIDを持つすべての要素が返される場合、またはスタイルが1つの要素にのみ適用される場合）、期待は満たされず、それらの期待に依存する機能は失敗します。

一部のJavaScriptライブラリには、複数の要素が同じIDを持つ場合に満たされない期待があります（d3.jsに関するwootscootinboogie のコメントを参照）

結論

標準に従うことをお勧めしますが、コードが現在の環境で期待どおりに機能し、これらのIDが予測可能/保守可能な方法で使用されていることがわかっている場合、これを行わない実用的な理由は2つだけです。

1. あなたは間違っている、とあなたが使うライブラリのいずれかが実際に可能性を避けるために行い、複数の要素が同じIDを持っている場合、誤動作を。
2. ライブラリまたはサービス（または開発者！）とのWebサイト/アプリケーションの前方互換性を維持するために、複数の要素が同じIDを持っているときに誤動作する可能性があります。これは、技術的には有効ではないため、合理的な可能性です。 HTML。

力はあなた次第です！

要素のタイプが異なっていても、深刻な問題が発生する可能性があります...

同じIDのボタンが3つあるとします。

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

次にjQuery、myidボタンがクリックされたときに何かを行うようにいくつかのコードを設定します。

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

何を期待しますか？クリックされるすべてのボタンがjQueryでクリックイベントハンドラーのセットアップを実行すること。残念ながらそれは起こりません。最初のボタンのみがクリックハンドラーを呼び出します。他の2つをクリックしても何も起こりません。それはまるでボタンではなかったかのようです！

だから、常に異なる割り当てるIDsにHTML要素。これはあなたを奇妙なものから守ります。:)

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

ボタンのいずれかがクリックされたときにクリックイベントハンドラーを実行したい場合は、jQueryコードのセレクターを変更して、ボタンにCSS適用されているクラスを次のように使用すると、完全に機能します。

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

いいえ。同じIDを持つ2つの要素は無効です。IDは一意です。そのようなことをしたい場合は、クラスを使用してください。スペースをデリミタとして使用することで、要素が複数のクラスを持つことができることを忘れないでください：

<div class="myclass sexy"></div>

HTMLのための公式の仕様は、そのIDタグは一意でなければなりません述べAND公式スペックもレンダリングが完了することができるならば、それは（つまり、HTMLで「エラー」、唯一の「無効」HTMLのようなものが存在しない）しなければならないと述べています。 したがって、以下は実際にidタグが実際に機能する方法です。それらはすべて無効ですが、引き続き機能します。

この：

<div id="unique">One</div>
<div id="unique">Two</div>

すべてのブラウザで正常にレンダリングされます。ただし、document.getElementByIdは配列ではなくオブジェクトのみを返します。idタグを介してのみ最初のdivを選択できます。JavaScriptを使用して最初のdivのIDを変更する場合、2番目のIDはdocument.getElementByIdでアクセスできます（Chrome、FireFox、IE11でテスト済み）。他の選択方法を使用してdivを選択することもでき、そのidプロパティが正しく返されます。

上記のこの問題は、SVGがDOM要素とその上のIDタグを含むことができるため、SVG画像をレンダリングするサイトに潜在的なセキュリティの脆弱性をもたらすことに注意してください（アップロードされた画像を介したスクリプトDOMリダイレクトを許可します）。SVGが置き換えられる要素の前にDOMに配置されている限り、画像は他の要素向けのすべてのJavaScriptイベントを受け取ります。

この問題は、私が知る限り、現在誰のレーダーにもありませんが、それは本当です。

この：

<div id="unique" id="unique-also">One</div>

また、すべてのブラウザーで正常にレンダリングされます。ただし、document.getElementById（ 'unique-also'）;を試した場合、この方法で定義した最初の ID のみが使用されます。上記の例では、nullが返されます（Chrome、FireFox、IE11でテスト済み）。

この：

<div id="unique unique-two">Two</div>

また、すべてのブラウザーで正常にレンダリングされますが、スペースで区切ることができるクラスタグとは異なり、idタグはスペースを許可するため、上記の要素のidは実際には「unique unique-two」であり、domに「unique」を要求しますまたは「unique-two」を単独で使用すると、DOMの他の場所で特に定義されていない限りnullを返します（Chrome、FireFox、IE11でテスト済み）。

SLaksの答えは正しいですが、補足として、x / html仕様では、すべてのIDが（単一の）htmlドキュメント内で一意である必要があると指定されています。オペレーションが要求したものとは正確には異なりますが、同じIDが複数のページにわたって異なるエンティティに添付されている有効なインスタンスが存在する可能性があります。

例：

（最新のブラウザに配信）article＃main-content { 一方向のスタイル }
（レガシーに配信）div＃main-content { 別の方法のスタイル }

たぶんアンチパターン。悪魔の支持者としてここを去るだけです。

そして、価値があるのは、少なくともChrome 26.0.1410.65、Firefox 19.0.2、およびSafari 6.0.3では、同じIDの要素が複数ある場合、jqueryセレクターは（少なくとも）そのIDの最初の要素を返します。

例えば

<div id="one">first text for one</div>
<div id="one">second text for one</div>

そして

alert($('#one').size());

テストについては、http：//jsfiddle.net/RuysX/を参照してください。

まあ、HTML5に固有のw3.orgのHTMLバリデーターを使用すると、IDは一意である必要があります

以下を検討してください...

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

バリデータは...で応答します

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>

...しかしOPは具体的に述べました-異なる要素タイプについてはどうですか？したがって、次のHTMLを検討してください...

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

...バリデーターの結果は...

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

結論：

どちらの場合でも（同じ要素タイプまたは異なる要素タイプ）、IDが複数回使用されている場合、有効なHTML5とは見なされません。

idの代わりにクラス名を使用できます。HTML IDは一意である必要がありますが、クラスは一意ではありません。クラス名を使用してデータを取得する場合、jsファイルのコード行の数を減らすことができます。

$(document).ready(function ()
{
    $(".class_name").click(function ()
    {
        //code
    });
});

Idは一意であるため、1つの要素に使用する必要があるので、それはできないと思います。クラスを目的に使用できます

<div id="one">first text for one</div>
<div id="one">second text for one</div>

var ids = document.getElementById('one');

idには最初のdiv要素のみが含まれます。したがって、同じIDを持つ要素が複数ある場合でも、ドキュメントオブジェクトは最初に一致したもののみを返します。

いいえ、IDは一意である必要があります。そのためにクラスを使用できます

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}

同じロール/ ID番号を持つクラスに複数の学生を参加させることはできますか？HTML id属性ではそうです。それらに同じクラスを使用できます。例えば：

<div class="a b c"></div>
<div class="a b c d"></div>

等々。

通常、HTMLページで同じIDを複数回使用しないことをお勧めします。それでも、ページ内で同じIDを何度も使用することができます。ただし、次のようにURI / URLの一部としてIDを使用する場合：

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

そして、ID（ '2015_FIFA_corruption_case'）がWebページの1つの（span）要素にのみ使用されている場合：

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

問題ありません。逆に、同じIDが複数の場所に存在すると、ブラウザーが混乱します。

はい、できます。

これらすべての回答が古いかどうかはわかりませんが、youtubeを開いてhtmlを調べてください。おすすめの動画を調べてみてください。次のように、すべてが同じIDと繰り返し構造を持っていることがわかります。

<span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL">