Due elementi HTML con lo stesso attributo id: Quanto è grave?

Basta sfogliare il codice sorgente di google maps. Nella loro intestazione, hanno 2 div con id = "search" l'uno contiene l'altro e ha anche l'attributo jstrack = "1". C'è una forma che li separa così:

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

Dal momento che questo è google, presumo che non sia un errore.

Quindi quanto può essere davvero grave violare questa regola? Fintanto che stai attento nella tua selezione di CSS e DOM, perché non riutilizzare le classi ID? Qualcuno lo fa apposta, e se sì, perché?

Le specifiche dicono UNICHE

La specifica HTML 4.01 afferma che l'ID deve essere univoco a livello di documento.

La specifica HTML 5 dice la stessa cosa ma in altre parole. Dice che l'ID deve essere univoco nella sua sottostruttura principale , che è fondamentalmente il documento se ne leggiamo la definizione .

Evitare la duplicazione

Ma poiché i renderer HTML perdonano molto quando si tratta di rendering HTML, consentono ID duplicati. Questo dovrebbe essere evitato se possibile e rigorosamente evitato quando si accede a livello di codice di elementi tramite ID in JavaScript. Non sono sicuro di quale getElementByIdfunzione debba essere restituita quando vengono trovati più elementi corrispondenti? Dovrebbe:

• restituire un errore?
• restituisce il primo elemento corrispondente?
• restituisce l'ultimo elemento corrispondente?
• restituire un set di elementi corrispondenti?
• non restituire niente?

Ma anche se i browser funzionano in modo affidabile in questi giorni, nessuno può garantire questo comportamento in futuro poiché è contro le specifiche. Ecco perché ti consiglio di non duplicare mai ID all'interno dello stesso documento.

Hai chiesto "quanto male". Quindi per dare un tocco in più alla risposta di RobertKoritnik (del tutto accurata) ...

Quel codice non è corretto. L'errato non arriva nei toni del grigio. Questo codice viola lo standard ed è quindi errato. Non verrebbe verificato il controllo di convalida e dovrebbe.

Detto questo, nessun browser attualmente sul mercato se ne lamenterebbe o non avrebbe avuto alcun problema. I browser avrebbero il diritto di lamentarsene, ma nessuna delle versioni attuali di nessuno di essi attualmente lo fa. Ciò non significa che le versioni future potrebbero non trattare male questo codice.

Il tuo comportamento nel tentativo di utilizzare quell'ID come selettore, sia in CSS che in JavaScript, non è indovinabile e probabilmente varia da browser a browser. Suppongo che uno studio potrebbe essere fatto per vedere come ogni browser reagisce a questo. Penso che nel migliore dei casi, lo tratterebbe proprio come "class =", e selezionerebbe l'elenco di essi. (Ciò potrebbe confondere le librerie JavaScript, tuttavia - se fossi l'autore di jQuery, avrei potuto ottimizzare il mio codice selettore in modo che se vieni da me con un selettore che inizia con "#", mi aspetto un singolo oggetto e ottengo un oggetto la lista potrebbe darmi una botta completamente.)

Potrebbe anche selezionare il primo, o forse l'ultimo, oppure non selezionarne nessuno, oppure bloccare completamente il browser. Non c'è modo di dirlo senza provarlo.

"Quanto male" dipende quindi interamente da quanto rigorosamente un particolare browser implementa le specifiche HTML e da cosa fa quando si confronta con una violazione di tali specifiche.

EDIT: SOLO mi è capitato di imbattermi oggi. Sto estraendo vari componenti dai moduli di ricerca su vari tipi di entità per produrre una grande utility di reporting all-in-one per questo sito, sto caricando i moduli di ricerca delle pagine remote in div nascosti e inserendoli nel mio generatore di report quando viene selezionato il tipo di entità appropriato come origine per il report. Quindi c'è una versione nascosta del modulo e una versione visualizzata nel generatore di report. Il codice JavaScript fornito, in ogni caso, si riferisce a elementi per ID, di cui ora sono DUE nella pagina: quella nascosta e quella visualizzata.

Quello che jQuery sembra fare è selezionarmi il PRIMO, che in ogni caso è esattamente quello che NON voglio.

Sto lavorando a questo problema scrivendo i selettori per specificare la regione della pagina in cui voglio inserire il mio campo (ovvero: $ ('# containerDiv #specificElement')). Ma c'è una risposta alla tua domanda: jQuery su Chrome si comporta sicuramente in un modo particolare di fronte a questa violazione delle specifiche.

Quanto è davvero grave?

1. Mi fa piangere
2. Non è valido
3. Molte librerie javascript non funzioneranno come previsto
4. Rende il tuo codice confuso

L'esperienza dice che getElementById nei principali browser restituirà il primo elemento corrispondente nel documento. Ma questo potrebbe non essere sempre il caso in futuro.

Quando a jQuery viene assegnato un ID, ad esempio #foo, utilizza getElementById e imita quel comportamento. Se devi aggirare questo (è triste), puoi usare $ (" * #foo") che convincerà jQuery a usare getElementsByTagName e restituirà un elenco di tutti gli elementi corrispondenti.

Spesso devo scrivere codice per altri siti e devo aggirare questo problema. In un mondo giusto, non avrei dovuto riprogettare le funzioni per iniziare controllando se un ID è univoco. Gli ID dovrebbero essere sempre univoci. Il mondo è crudele ed è per questo che piango.

È possibile fare molte cose - ma questo non significa che si dovrebbe.

Come programmatore (in generale) costruiamo le nostre vite sull'essere precisi e seguendo le regole - ecco una regola che è semplice da seguire, che è abbastanza fondamentale per quello che facciamo - ci piace (dipende da) identificatori univoci all'interno di un determinato ambito ...

Infrangere la regola è qualcosa che possiamo fare perché il browser è troppo accomodante - ma davvero staremmo tutti meglio se i browser fossero severi sulla necessità di avere un HTML ben formato e valido, la piccola quantità di dolore che avrebbe causato avrebbe da tempo stato rimborsato!

Quindi, è davvero così male? Come programmatore come puoi anche chiedere? È un crimine contro la civiltà (-:

Addendum:

Scrivi che i browser sono troppo accomodanti come se fosse una brutta cosa

Sì, perché non stiamo parlando di regole complicate, stiamo parlando sostanzialmente di rendere le cose ben formate e di applicare in altro modo regole che possono essere testate meccanicamente e che a loro volta rendono più semplice l'elaborazione meccanica del risultato. Se i browser fossero stati severi, gli strumenti si sarebbero adattati molto rapidamente per supportarlo - non è stato così, alcuni nella misura in cui sfruttano invece quel fallimento. Basti pensare a questo: l'e-mail sarebbe stata un mezzo molto più bello se MS e Netscape non avessero rovinato tutto consentendo l'HTML senza restrizioni quando un "linguaggio di markup e-mail" molto meno complesso con supporto esplicito per il testo citato ci avrebbe fornito uno strumento molto migliore ... ma quella nave salpò e allo stesso modo possiamo 'dovrebbe avere ) ma non possiamo

In Scripting: getElementByIDrestituirà solo la prima corrispondenza. In CSS: #idinteresserà TUTTI gli elementi con quell'ID. In Browser Render non avrà alcun effetto.

Questo è il comportamento dello standard w3c. Non è possibile, è quello definito di fatto.

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