Comment énumérer tous les identifiants html dans un document avec javascript?

Sur les navigateurs modernes, vous pouvez le faire via

document.querySelectorAll('*[id]') 

Devrait faire le travail.

Si vous avez besoin de tous les descendants de myElement avec ID, puis faites

 myElement.querySelectorAll('*[id]') 

Si vous voulez faire très attention à exclure <span id=""> , alors peut-être

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

Si la compatibilité avec les anciens navigateurs est requise

 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); } } 

allIds vous laisser avec tous les identifiants dans allIds .

Si vous trouvez que vous devez simplement énumérer les identifiants sous un noeud de formulaire particulier, vous pouvez remplacer document.getElementsByTagName par myFormNode.getElementsByTagName .

Si vous souhaitez inclure les identifiants et les NOM,

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

En dessous du if ci if dessus.

Si vous faites votre développement à l'aide d'un navigateur assez moderne, vous pouvez utiliser querySelectorAll() , puis utiliser Array.prototype.forEach pour itérer la collection.

 var ids = document.querySelectorAll('[id]'); Array.prototype.forEach.call( ids, function( el, i ) { // "el" is your element console.log( el.id ); // log the ID }); 

Si vous voulez un tableau d'identifiants, utilisez Array.prototype.map :

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

Le sélecteur jQuery $('[id]') obtiendra tous les éléments avec un attribut id :

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

Exemple de travail ici: http://jsfiddle.net/RichieHindle/yzMjJ/2/

Obtenez tous les tags avec le caractère générique:

 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); } 

Eh bien, puisqu'il s'agit d'une forme, je suis convaincu que vous ne souhaitez que les éléments de formulaire et pas toutes les étiquettes dans le document (comme href, div etc.)

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

Avec jQuery

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

Ceci obtient tous les éléments dans le DOM, et exécute une fonction sur chacun pour renvoyer l'identifiant (et si undefined , le retour null ne renverra rien. Cela renvoie un objet jQuery qui est ensuite converti en une matrice JavaScript avec get() et Ceci est ensuite converti en une chaîne d'ids séparée par des virgules.

Essayez-le sur cette page et vous obtenez

"Notify-container, overlay-header, custom-header, header, portalLink, topbar, hlinks, hlinks-user, hlinks-nav, hlinks-custom, hsearch, search, hlogo, hmenus, nav-questions, nav-tags, nav -utilisateurs, nav-badges, nav-sans réponse, nav-askquestion, contenu, question-en-tête, barre principale, question, éditer les tags, link-post-7115022, close-question-7115022, flag-post-7115022, commentaires-7115022 , Add-comment-7115022, comments-link-7115022, réponses, réponses-en-tête, onglets, réponse-7115033, link-post-7115033, flag-post-7115033, commentaires-7115033, add-comment-7115033, commentaires-lien -7115033, answer-7115042, link-post-7115042, flag-post-7115042, commentaires-7115042, add-comment-7115042, commentaires-link-7115042, answer-7115043, link-post-7115043, delete-post-7115043 , Flag-post-7115043, post-éditeur-7115043, wmd-button-bar-7115043, wmd-button-row-7115043, wmd-bold-button-7115043, wmd-italic-button-7115043, wmd-spacer1-7115043 , Wmd-link-button-7115043, wmd-quote-button-7115043, wmd-code-button-7115043, wmd-image-button-7115043, wmd-spacer2-7115043, wmd-olist-button-7115043, wmd-ulist -bout On-7115043, wmd-heading-button-7115043, wmd-hr-button-7115043, wmd-spacer3-7115043, wmd-undo-button-7115043, wmd-redo-button-7115043, wmd-help-button-7115043, Wmd-input-7115043, draft-saved-7115043, communitymode-7115043, wmd-preview-7115043, fkey, author, edit-comment-7115043, edit-comment-error-7115043, submit-button-7115043, commentaires-7115043, Add-comment-7115043, commentaires-link-7115043, post-forme, post-éditeur, wmd-button-bar, wmd-input, brouillard, mode communauté, wmd-prévisualisation, fkey, auteur, submit-button, show- Éditeur-bouton, barre latérale, qinfo, adzerk2, newsletter-annonce, newsletter-ad-header, newsletter-inscription-conteneur, newsletter-inscription, newsletter-prévisualisation-conteneur, newsletter-prévisualisation, h-related, feed-link, feed- Link-text, prettify-lang, footer, footer-menu, footer-sites, footer-flair, svnrev, copyright "

Tout d'abord, je recommande fortement jQuery. Cela m'a simplifié beaucoup mon développement JavaScript. (Voir la réponse de RichieHindle)

Deuxièmement, je sais que beaucoup de navigateurs gardent une liste d'ID pour l'accès direct (rapide), mais je ne connais pas un moyen d'y accéder. Il serait probablement spécifique au navigateur de toute façon, ce qui n'est probablement pas le meilleur itinéraire.

Enfin, le code:

 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