Più elementi HTML diversi possono avere lo stesso ID se sono elementi diversi?

Uno scenario come questo è valido ?:

div#foo
span#foo
a#foo

No.

Gli ID elemento devono essere univoci nell'intero documento.

Penso che ci sia una differenza tra il fatto che qualcosa DOVREBBE essere unico o DEVE essere unico (cioè applicato dai browser Web).

Gli ID dovrebbero essere univoci? SÌ.

Gli ID devono essere univoci? No, almeno IE e FireFox consentono a più elementi di avere lo stesso ID.

Più elementi possono avere lo stesso ID?

Sì, indipendentemente dal fatto che siano lo stesso tag, i browser visualizzeranno la pagina anche se più elementi hanno lo stesso ID.

È un HTML valido?

No. Questo è ancora vero a partire dalle specifiche HTML 5.1 . Tuttavia, la specifica dice anche che getElementById deve restituire il primo elemento con l'ID specificato , rendendo il comportamento non indefinito nel caso di un documento non valido.

Quali sono le conseguenze di questo tipo di HTML non valido?

La maggior parte (se non tutti) i browser hanno selezionato e ancora non selezionare il primo elemento con un dato ID, al momento della chiamata getElementById. La maggior parte delle librerie che trovano elementi per ID ereditano questo comportamento. La maggior parte dei browser (se non tutti) applica anche gli stili assegnati dai selettori ID (ad es#myid ) A tutti gli elementi con l'ID specificato. Se questo è ciò che ti aspetti e intendi, allora non ci sono conseguenze indesiderate. Se ti aspetti / intendi qualcos'altro (ad es. Per la restituzione di tutti gli elementi con quell'ID, o per lo stile da applicare a un solo elemento), le tue aspettative non saranno soddisfatte e qualsiasi funzionalità che si basa su tali aspettative fallirà.

Alcune librerie javascript non hanno aspettative che non sono soddisfatte quando più elementi hanno lo stesso ID (si veda il commento di wootscootinboogie su d3.js)

Conclusione

È meglio attenersi agli standard, ma se sai che il tuo codice funziona come previsto negli ambienti attuali e questi ID vengono utilizzati in modo prevedibile / gestibile, allora ci sono solo 2 motivi pratici per non farlo:

1. Per evitare la possibilità che ti sbagli, e una delle librerie che usi effettivamente non funziona correttamente quando più elementi hanno lo stesso ID.
2. Per mantenere la compatibilità futura del tuo sito Web / applicazione con librerie o servizi (o sviluppatori!) Potresti riscontrare in futuro che potrebbero non funzionare correttamente quando più elementi hanno lo stesso ID, il che è una possibilità ragionevole dal momento che tecnicamente non è valida HTML.

Il potere è tuo!

Anche se gli elementi sono di tipi diversi può causare seri problemi ...

Supponiamo di avere 3 pulsanti con lo stesso ID:

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

Ora imposti del jQuerycodice per fare qualcosa quando fai myidclic sui pulsanti:

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

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

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

Cosa ti aspetteresti? Che ogni pulsante selezionato eseguisse la configurazione del gestore eventi click con jQuery. Sfortunatamente non accadrà. SOLO il 1 ° pulsante chiama il gestore di clic. Gli altri 2 quando si fa clic non fanno nulla. È come se non fossero affatto pulsanti!

Quindi assegnare sempre diversi IDsagli HTMLelementi. Questo ti coprirà contro cose strane. :)

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

Ora se vuoi che il gestore di eventi click venga eseguito quando viene fatto clic su uno dei pulsanti, funzionerà perfettamente se cambi il selettore nel codice jQuery per usare la CSSclasse applicata a questi in questo modo:

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

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

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

No. due elementi con lo stesso ID non sono validi. Gli ID sono univoci, se desideri fare qualcosa del genere, usa una classe. Non dimenticare che gli elementi possono avere più classi utilizzando uno spazio come delimitatore:

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

La specifica ufficiale per HTML afferma che i tag id devono essere univoci E la specifica ufficiale afferma anche che se il rendering può essere completato, deve (cioè non ci sono cose come "errori" in HTML, solo HTML "non valido"). Quindi, il seguente è il modo in cui i tag id funzionano effettivamente nella pratica . Sono tutti non validi , ma funzionano ancora:

Questo:

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

Rende bene in tutti i browser. Tuttavia, document.getElementById restituisce solo un oggetto, non un array; sarai sempre in grado di selezionare il primo div tramite un tag id. Se dovessi modificare l'id del primo div utilizzando JavaScript, il secondo ID sarebbe quindi accessibile con document.getElementById (testato su Chrome, FireFox e IE11). Puoi comunque selezionare il div usando altri metodi di selezione e la sua proprietà id verrà restituita correttamente.

Si noti che questo problema precedente apre una potenziale vulnerabilità di sicurezza nei siti che rendono le immagini SVG, poiché gli SVG possono contenere elementi DOM e anche tag id su di essi (consente reindirizzamenti DOM degli script tramite immagini caricate). Finché SVG è posizionato nel DOM prima dell'elemento che sostituisce, l'immagine riceverà tutti gli eventi JavaScript destinati all'altro elemento.

Questo problema non è attualmente sul radar di nessuno per quanto ne so, eppure è reale.

Questo:

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

Anche il rendering va bene in tutti i browser. Tuttavia, viene utilizzato solo il primo ID definito in questo modo, se si è provato document.getElementById ('unique-also'); nell'esempio sopra, verrai restituito null (testato su Chrome, FireFox e IE11).

Questo:

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

Rende anche bene in tutti i browser, tuttavia, a differenza dei tag di classe che possono essere separati da uno spazio, il tag id consente gli spazi, quindi l'id dell'elemento sopra è in realtà "unico unico-due", e chiede alla dom "unico" o "unique-two" in isolamento restituisce null se non diversamente definito altrove nel DOM (testato su Chrome, FireFox e IE11).

La risposta di SLaks è corretta, ma come nota aggiuntiva che le specifiche x / html specificano che tutti gli ID devono essere univoci all'interno di un (singolo) documento html . Sebbene non sia esattamente ciò che ha richiesto l'operazione, potrebbero esserci casi validi in cui lo stesso ID è associato a entità diverse su più pagine.

Esempio:

(servito ai browser moderni) articolo # main-content { designato in un modo }
(servito all'eredità) div # main-content { disegnato in un altro modo }

Probabilmente un antipasto però. Sto solo lasciando qui il punto di avvocato del diavolo.

E per quello che vale, su Chrome 26.0.1410.65, Firefox 19.0.2 e Safari 6.0.3 almeno, se hai più elementi con lo stesso ID, i selettori jquery (almeno) restituiranno il primo elemento con quell'ID.

per esempio

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

e

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

Vedi http://jsfiddle.net/RuysX/ per un test.

Bene, usando il validatore HTML su w3.org , specifico per HTML5, gli ID devono essere univoci

Considera quanto segue ...

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

il validatore risponde con ...

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>

... ma l'OP ha dichiarato specificamente: che dire di diversi tipi di elementi. Quindi considera il seguente 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>

... il risultato dal validatore è ...

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

Conclusione:

In entrambi i casi (stesso tipo di elemento o tipo di elemento diverso), se l'id viene utilizzato più di una volta non viene considerato HTML5 valido.

Possiamo usare il nome della classe invece di usare id. ID HTML sono dovrebbero essere univoci ma le classi no. quando si recuperano i dati utilizzando il nome della classe, è possibile ridurre il numero di righe di codice nei file js.

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

Penso che non puoi farlo perché Id è unico, devi usarlo per un elemento. È possibile utilizzare la classe per lo scopo

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

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

gli id ​​contengono solo il primo elemento div. Quindi, anche se ci sono più elementi con lo stesso ID, l'oggetto documento restituirà solo la prima corrispondenza.

No, gli ID devono essere univoci. È possibile utilizzare le classi a tale scopo

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

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

È possibile avere più di uno studente in una classe con lo stesso Roll / Id no? In HTML l' idattributo è così. Puoi usare la stessa classe per loro. per esempio:

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

E così via.

Di solito, è meglio non utilizzare lo stesso ID più volte in una pagina HTML. Anche così, è possibile utilizzare lo stesso ID più volte in una pagina. Tuttavia, quando si utilizza un ID come parte di URI / URL come di seguito:

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

E se l'ID ('2015_FIFA_corruption_case') viene utilizzato per un solo elemento (span) nella pagina Web:

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

Non ci sarebbero problemi. Al contrario, lo stesso ID esiste in più di un posto, il browser sarebbe confuso.

Si Loro possono.

Non so se tutte queste risposte siano obsolete, ma basta aprire YouTube e ispezionare l'html. Prova a ispezionare i video suggeriti, vedrai che hanno tutti lo stesso ID e la struttura ripetuta come segue:

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