web-dev-qa-db-fra.com

Comment puis-je énumérer tous les identifiants HTML dans un document avec javascript?

J'aimerais pouvoir utiliser javascript pour trouver chaque identifiant (ou nom) de chaque objet d'un document html afin qu'il puisse être imprimé au bas de la page.

Pour mieux comprendre ce que j'essaie d'accomplir, laissez-moi vous expliquer. Je construis de temps en temps des formulaires volumineux pour des demandes telles que les demandes de propriétés, les listes de location, les formulaires détaillés d’enregistrement des utilisateurs de sites Web médicaux, etc. Comme je le fais maintenant, je construis le formulaire, attribue les identifiants et les noms et décide quelles valeurs sont requises et autres. Ensuite, lorsque je construis la partie php de validation de formulaire et d’insertion de base de données pour le formulaire, j’ai parcouru manuellement le code HTML pour extraire tous les identifiants à référencer du tableau $ _post pour la validation d’entrée et l’insertion de base de données. Cela a pris beaucoup de temps et une réelle douleur, souvent entachée d'erreurs de frappe.

Le formulaire sur lequel je travaille actuellement est trop volumineux, et je préférerais de loin écrire une fonction javascript que je peux exécuter sur ma copie locale de la page pour répertorier tous les identifiants afin de ne pas avoir à les copier et les copier. collez-les un à un ou écrivez-les. Je pourrais aussi utiliser la boucle javascript pour imprimer le code php autour des noms d'identifiant, de sorte qu'il ne me reste plus qu'à copier la liste et à modifier légèrement l'identifiant dont je n'ai pas besoin ... J'espère que vous aurez le idée.

Toutes les suggestions sur la façon dont je peux déposer tous les identifiants dans un tableau, ou s'il y a déjà un tableau auquel je peux accéder et passer en boucle (je n'ai rien trouvé sur Google). En outre, toute suggestion sur la manière d'accélérer le processus de production de gros formulaires avec un flux de travail qui génère le php ou le rend plus rapide que ma méthode actuelle serait grandement appréciée!

javascripthtmlvalidation
25
rmmoul

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, faites alors

myElement.querySelectorAll('*[id]')

Si vous voulez vraiment faire 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); }
}

devrait vous laisser avec tous les identifiants dans allIds.

Si vous estimez que vous devez simplement énumérer les ID sous un nœud de formulaire particulier, vous pouvez remplacer document.getElementsByTagName par myFormNode.getElementsByTagName.

Si vous souhaitez inclure à la fois les identifiants et les noms, mettez

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

en dessous de la if ci-dessus.

39
Mike Samuel

Si vous faites votre développement en utilisant 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;
});
17
user113716

Obtenez tous les tags avec le joker:

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

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/

9
RichieHindle

eh bien, comme il s’agit d’un formulaire, je suis sûr que vous ne souhaitez effectuer une itération que sur les éléments du formulaire et non sur toutes les balises du document (comme href, div, etc.).

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

avec jQuery

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

cela récupère tous les éléments du DOM et exécute une fonction sur chacun pour renvoyer l'id (et si undefined, renvoyer null ne renverra rien. Cela retourne un objet jQuery qui est ensuite converti en un tableau JavaScript avec get() et c'est puis converties en une chaîne d'identifiants séparés par des virgules.

Essayez-le sur cette page et vous obtenez

"notify-container, overlay-header, entête personnalisée, entête, portalLink, barre supérieure, hlinks, hlinks-user, hlinks-nav, hlinks-custom, hsearch, recherche, hlogo, hmenus, nav-questions, nav-tags, nav -utilisateurs, badges, sans réponse, nav-askquestion, contenu, question-en-tête, barre principale, question, edit-tags, link-post-7115022, close-question-7115022, drapeau-post-7115022, commentaires-7115022 , add-comment-7115022, comments-link-7115022, réponses, entêtes-réponses, onglets, answer-7115033, lien-post-7115033, indicateur-post-7115033, commentaires-7115033, add-comment-7115033, comments-link -7115033, answer-7115042, link-post-7115042, flag-post-7115042, comments-7115042, add-comment-7115042, comments-link-7115042, answer-7115043, link-post-7115043, delete-post-7115043, delete-post-7115043 drapeau-post-7115043 post-éditeur-7115043 wmd-bouton-barre-7115043 wmd-bouton-rangée-7115043 wmd-bouton-gras-7115043 wmd-bouton-italique-7115043, wmd-bouton-gras-7115043 , lien-bouton-7115043, lien-citation-bouton-7115043, code-bouton-7115043, bouton-image-7115043, wmd-spacer2-7115043, bouton-7max-bouton-7115043, wmd-image-bouton-7115043, wmd-lien -bout on-7115043, wmd-entraineur-bouton-7115043, wmd-hr-bouton-7115043, wmd-spacer3-7115043, wmd-voile-bouton-7115043, wmd-redo-bouton-7115043, wmd-voile-bouton-7115043, wmd-voile-bouton-7115043, wmd-input-7115043, projet-enregistré-7115043, communitymode-7115043, wmd-preview-7115043, auteur, edit-comment-7115043, edit-comment-error-7115043, submit-button-7115043, comments-7115043, add-comment-7115043, comments-link-7115043, post-formulaire, post-éditeur, barre de boutons wmd, entrée wmd, brouillon enregistré, mode de communauté, wmd-preview, fkey, auteur, bouton de soumission, show bouton-éditeur, barre latérale, qinfo, adzerk2, bulletin-annonce, bulletin-annonce-en-tête, bulletin-abonnement-conteneur, bulletin-inscription, bulletin-aperçu-conteneur, bulletin-aperçu, lien-h, lien-feed, flux lien-texte, prettify-lang, footer, footer-menu, footer-sites, footer-flair, svnrev, copyright "

3
Russ Cam

Une solution simple ES6 (es2015) basée sur la réponse de user113716

const elementsById = document.querySelectorAll('[id]');
const elementsByIdArr = Array.prototype.map.call(elementsById, el => el.id);


/**
* identify all element ID's on a page,
* construct array of all element ID's on a page,
*/

const elementsById = document.querySelectorAll('[id]');
const elementsByIdArr = Array.prototype.map.call(elementsById, el => el.id);

for (const el of elementsByIdArr) {
  document.getElementById(el).innerHTML = `My id is &quot;&num;${el}&quot;`;
}
.title {font-weight: bolder; font-size: 24px;}
.description {line-height: 1.8em;}
<div id="primary" class="title"></div>
<div id="description" class="description"></div>

0
Theuns Coetzee