Come faccio a enumerare tutti gli ID html in un documento con javascript?

Question

Mi piacerebbe poter usare javascript per trovare ogni id (o nome) per ogni oggetto in un documento html in modo che possano essere stampati nella parte inferiore della pagina.

Per comprendere meglio quello che sto cercando di realizzare, lasciatemi spiegare. Di tanto in tanto costruisco moduli di grandi dimensioni per applicazioni quali proprietà immobiliari, annunci di noleggio, moduli di registrazione degli utenti di siti Web dettagliati e simili. Mentre lo faccio ora, costruisco il modulo, assegno i nomi e i nomi e decidi quali valori sono richiesti e così via. Quindi, quando costruisco la validazione del modulo php e la parte di inserimento del database per il modulo, ho passato manualmente l'html e ho estratto tutti gli id ​​da riferimento dall'array $ _post per la validazione dell'input e l'inserimento del database. Questo è stato molto dispendioso in termini di tempo e un vero dolore, spesso legato a errori di battitura.

Attualmente il modulo su cui sto lavorando è troppo grande e preferisco scrivere una funzione javascript che posso eseguire sulla mia copia locale della pagina per elencare tutti gli id ​​in modo da non copiarli e incollarli uno per uno, o scriverli. Potrei quindi usare anche il ciclo javascript per stampare il codice php attorno ai nomi id in modo che dovessi solo copiare l'elenco e modificare leggermente l'ID di cui non ho bisogno ... Spero che voi ragazzi prendiate il idea.

Qualsiasi suggerimento su come posso rilasciare tutti gli ID in un array, o se c'è già un array a cui posso accedere e andare in loop (non ho trovato nulla su google). Inoltre, qualsiasi suggerimento su come accelerare il processo di produzione di grandi forme con un flusso di lavoro che genera il php o lo rende più veloce del mio attuale metodo sarebbe molto apprezzato!

Answer 1

Su modern browsers è possibile farlo tramite

document.querySelectorAll('*[id]') 

dovrebbe fare il lavoro.

Se avete bisogno di tutti i discendenti di myElement con ID, poi fare

myElement.querySelectorAll('*[id]') 

Se si vuole essere molto attenti per escludere <span id="">, allora forse

document.querySelectorAll('*[id]:not([id=""])') 

---

Se la compatibilità con i più anziani browser è richiesto

var allElements = document.getElementsByTagName("*"); 
var allIds = []; 
for (var i = 0, n = allElements.length; i < n; ++i) { 
    var el = allElements[i]; 
    if (el.id) { allIds.push(el.id); } 
} 

dovrebbe lasciare tutti gli ID in allIds.

Se si rileva la necessità di enumerare gli ID in uno specifico nodo di modulo, è possibile sostituire document.getElementsByTagName con myFormNode.getElementsByTagName.

Se si desidera includere sia gli ID e nomi, poi mettere

else if (el.name) { allIds.push(el.name); } 

sotto il if sopra.

Answer 2

Ottenere tutti i tag con il carattere jolly:

var allElements = document.getElementsByTagName('*'); 
for(var i = 0; i < allElements.length; i++) { 
    // ensure the element has an Id that is not empty and does exist 
    // and string other than empty, '', will return true 
    allElements[i].id && console.log(allElements[i].id); 
} 

Answer 3

con jQuery

$('*').map(function() { 
    return this.id || null; 
}).get().join(','); 

questo diventa tutti gli elementi del DOM, e gestisce una funzione su ciascun per restituire l'id (e se undefined , restituendo null non restituirà nulla, restituisce un oggetto jQuery che viene quindi convertito in un array JavaScript con get() e viene quindi convertito in una stringa di id separati da virgole.

provarlo su questa pagina e si ottiene

"notify-contenitore, overlay-header, custom-intestazione, intestazione, portalLink, topbar, hlinks, hlinks-user, hlinks-nav, hlinks-custom, hsearch, di ricerca, hlogo, hmenus, NAV-domande, nav-tag, NAV-utenti, nav-badge, nav-senza risposta, nav-askquestion, contenuti, domanda-intestazione, mainbar, interrogativi, edit-tag, link-post 7115022, primo question-7115022, la bandiera-post-7115022, commenti-7115022, add-commento-7115022, commenti-link-7115022, risposte, risposte-header, schede, rispondere a-7.115.033, link-post-7.115.033, della bandierina post-7115033, commenti-7115033, add-commento-7115033, commenti-link-7115033, rispondono-7.115.042, link-post-7.115.042, la bandiera-post-7.115.042, commenti-7115042, add-commento-7.115.042, commenti-link- 7115042, 7115043 rispondere-, link-post-7115043, eliminare-post-7115043, la bandiera-post-7115043 Post-editore-7115043, WMD-button-bar-7115043, WMD-button-fila-7115043, WMD-bold-button-7115043, WMD-italico-button-7115043, WMD-spacer1-7115043, WMD-link-pulsante -7115043, WMD-quote-button-7.115.043, WMD-code-button-7.115.043, WMD-image-button-7.115.043, WMD-spacer2-7115043, WMD-olist-button-7.115.043, WMD-ulist-button-7.115.043, WMD -heading-button-7115043, ADM-hr-button-7115043, ADM spacer3-7115043, wmd-undo-button-7115043, ADM-cuci-button-7115043, ADM-help-button-7115043, ADM-input-7115043 , progetto-salva-7.115.043, communitymode-7.115.043, WMD-anteprima-7.115.043, Fkey, autore, edit-commento-7.115.043, edit-commento-error-7.115.043, inviare-button-7.115.043, commenti-7.115.043, add-commento-7.115.043 , commenti-link-7115043, post-forma, post-redattore, WMD-button-bar, WMD-input, progetto-salvato, communitymode, WMD-anteprima, FKEY, autore, presentare-tasto, show-editor di pulsanti, la barra laterale , qinfo, adzerk2, newsletter-ad, newsletter-ad-intestazione, newsletter-iscrizione-contenitore, newsletter-iscrizione, newsletter-anteprima-contenitore, newsletter-anteprima, h-correlati, alimentazione-link, feed-link-text, prettify -lang, foo ter, piè di pagina-menù, footer-siti, footer-flair, svnrev, copyright"

Answer 4

Il selettore jQuery $('[id]') avranno tutti gli elementi con un attributo id: esempio

$('[id]').each(function() { 
    do_something(this.id); 
}); 

Lavorare qui: http://jsfiddle.net/RichieHindle/yzMjJ/2/

Answer 5

Se si sta sviluppando utilizzando un browser abbastanza moderno, è possibile utilizzare querySelectorAll(), quindi utilizzare Array.prototype.forEach per iterare la raccolta.

var ids = document.querySelectorAll('[id]'); 

Array.prototype.forEach.call(ids, function(el, i) { 
    // "el" is your element 
    console.log(el.id); // log the ID 
}); 

---

Se si desidera una matrice di ID, quindi utilizzare Array.prototype.map:

var arr = Array.prototype.map.call(ids, function(el, i) { 
    return el.id; 
}); 

Answer 6

Prima di tutto, mi raccomando jQuery. Ha semplificato molto il mio sviluppo JavaScript. (Vedi la risposta di RichieHindle)

In secondo luogo, so che molti browser mantengono una lista di ID per l'accesso diretto (veloce), ma non conosco un modo per accedervi. Probabilmente sarebbe comunque specifico del browser, quindi probabilmente non è la strada migliore.

Infine, il codice:

var elementList = document.getElementsByTagName("*"); 
var idList = []; 
for (var i in elementList) { 
    if (elementList[i].id != "") { 
    idList.push(elementList[i].id); 
    } 
} 
// Do something with your array of ids 

Answer 7

bene, dal momento che è una forma, sono sicuro che si desidera iterare solo sugli elementi di forma e non tutti i tag nel documento (come href, div ecc.)

for (var i=0; i < form.elements.length; i++) { 
    var elementId = form.elements[i].id; 
}