JavaScript e getElementById per più elementi con lo stesso ID

Question

Come posso ottenere una raccolta di elementi specificando l'attributo id? Voglio ottenere il nome di tutti i tag che hanno lo stesso id in html.

Desidero utilizzare SOLO getElementById() per ottenere una matrice di elementi. Come posso fare questo?

Answer 1

L'id dovrebbe essere univoco, utilizzare invece l'attributo "nome" e "getelementsbyname" e si avrà la matrice.

Answer 2

È illegale disporre di più elementi con lo stesso id. Il id viene utilizzato come identificativo individuale. Per gruppi di elementi, utilizzare invece class e getElementsByClassName.

Answer 3

Il HTML spec richiesto l'attributo ID di essere unici in una pagina:

Questo attributo assegna un nome a un elemento. Questo nome deve essere univoco in un documento.

Se si dispone di più elementi con lo stesso ID, il codice HTML non è valido.

Quindi, getElementById() deve restituire sempre un elemento. Non puoi renderlo restituire più elementi.

ci sono un paio di funzioni correlate che restituirà un array di elementi - getElementsByName, o getElementsByClassName che possono essere più adatto alle vostre esigenze, anche se getElementsByClassName è nuovo in HTML 5, che è ancora in bozza.

Answer 4

Non si dovrebbe fare questo e anche se è possibile non è affidabile e incline a causare problemi.

Il motivo è che un ID è univoco nella pagina. non puoi avere più di 1 elemento nella pagina con lo stesso ID.

Answer 5

Perché si vorrebbe fare questo è oltre me, dal momento che si suppone che id sia univoco in un documento. Tuttavia, i browser tendono ad essere piuttosto lassista su questo, quindi se proprio deve utilizzare getElementById per questo scopo, si può fare in questo modo:

function whywouldyoudothis() { 
    var n = document.getElementById("non-unique-id"); 
    var a = []; 
    var i; 
    while(n) { 
     a.push(n); 
     n.id = "a-different-id"; 
     n = document.getElementById("non-unique-id"); 
    } 

    for(i = 0;i < a.length; ++i) { 
     a[i].id = "non-unique-id";  
    } 
    return a; 
} 

Tuttavia, questo è stupido, e io non mi fiderei a questo funziona su tutti i browser per sempre. Sebbene la specifica DOM HTML definisca id come readwrite, un browser di convalida si lamenterà se si trova di fronte a più di un elemento con lo stesso id.

EDIT: Dato un documento valido, lo stesso effetto potrebbe essere ottenuto in tal modo:

function getElementsById(id) { 
    return [document.getElementById(id)]; 
} 

Answer 6

possiamo usare document.forms [0] .Controlid

Answer 7

Se si sta utilizzando d3 per la gestione multipla oggetti con la stessa classe/id

È possibile rimuovere un sottoinsieme di elementi di classe utilizzando d3.selectAll ("classname");

Ad esempio il grafico ciambella qui http://medcorp.co.nz utilizza copie di un oggetto arco con nome di classe "arco" e c'è una sola riga di d3, d3.selectAll ("arc").rimuovere(); rimuovere tutti quegli oggetti;

utilizzando document.getElementById ("arco"). Remove(); rimuove solo un singolo elemento e dovrebbe essere chiamato più volte (come con i suggerimenti precedenti crea un ciclo per rimuovere gli oggetti n volte)

Answer 8

La classe è più che sufficiente per riferirsi a qualsiasi cosa tu voglia, perché può avere una denominazione di uno dei più parole:

<input class="special use"> 
<input class="normal use"> 
<input class="no use"> 
<input class="special treatment"> 
<input class="normal treatment"> 
<input class="no special treatment"> 
<input class="use treatment"> 

questo è il modo è possibile applicare diversi stili con i CSS (e Bootstrap è il miglior esempio di esso) e, naturalmente, si può chiamare

document.getElementsByClassName("special"); 
document.getElementsByClassName("use"); 
document.getElementsByClassName("treatment"); 
document.getElementsByClassName("no"); 
document.getElementsByClassName("normal"); 

un e così via per qualsiasi gruppo di cui hai bisogno.

Ora, nell'ultimo caso si desidera raggruppare gli elementi per ID. È possibile utilizzare e fare riferimento a elementi utilizzando un numericamente simile, ma non uguale ID:

<input id=1> 
<input id="+1"> 
<input id="-1"> 
<input id="1 "> 
<input id=" 1"> 
<input id="0x1"> 
<input id="1."> 
<input id="1.0"> 
<input id="01.0"> 
<input id="001"> 

questo modo è possibile, conoscendo l'id numerico, l'accesso e ottenere un elemento da solo l'aggiunta di caratteri numerici aggiuntivi non invalidanti e chiamando una funzione per ottenere (analizzando e così via) l'indice originale dal suo valore identificativo di stringa legale. E 'utile per quando si:

• avere diverse righe con elementi simili e desidera gestire i suoi eventi coerentemente. Non importa se ne elimini uno o lo quasi tutti. Poiché il riferimento numerico è ancora presente, è possibile riutilizzarli e riassegnare il formato eliminato.

• A corto di identificativi di classe, nome e tagname.

Anche se è possibile utilizzare gli spazi e altri segni comuni, anche quando si tratta di un non un obbligo strettamente convalidato nei browser, non è consigliabile usarli, specialmente se avete intenzione di inviare i dati in altri formati come JSON. Si può anche gestire cose simili con PHP, ma questa è una cattiva pratica che tende a pratiche di programmazione sporche.

Answer 9

Come altri hanno detto, non dovrebbe avere lo stesso ID più di una volta nel codice HTML, tuttavia ... elementi con un ID sono attaccato al documento oggetto e per finestra su Internet Explorer  . Fare riferimento a:

Do DOM tree elements with ids become global variables?

Se più di un elemento con lo stesso ID esiste nel codice HTML, questa proprietà è attaccato come un array. Mi dispiace, ma non so dove cercare se questo è il comportamento standard o almeno si ottiene lo stesso comportamento tra i browser, cosa di cui dubito.

Answer 10

So che questa è una vecchia domanda e che una pagina HTML con più ID non è valida. Tuttavia, mi sono imbattuto in questi problemi mentre avevo bisogno di raschiare e riformattare la documentazione HTML dell'API di qualcun altro che conteneva ID duplicati (HTML non valido).

Quindi, per chiunque altro, ecco il codice che ho usato per aggirare il problema utilizzando querySelectorAll:

var elms = document.querySelectorAll("[id='duplicateID']"); 

for(var i = 0; i < elms.length; i++) 
    elms[i].style.display='none'; // <-- whatever you need to do here. 

Answer 11

document.querySelectorAll("#yourId"); restituisce tutti gli elementi il ​​cui ID è yourId