Comment puis-je énumérer toutes les id html dans un document avec javascript?

je voudrais pouvoir utiliser javascript pour trouver chaque id (ou nom) de chaque objet dans un document html afin qu'ils puissent être imprimés au bas de la page.

pour mieux comprendre ce que j'essaie d'accomplir, laissez-moi vous expliquer. Je construis de grands formulaires de temps en temps pour des choses telles que des demandes de propriété, des listes de location, des formulaires détaillés d'enregistrement d'utilisateur de site web médical et autres. Comme je le fais maintenant, je construis la forme, assignez les id et les noms et décidez qui les valeurs sont nécessaires et ces. Puis quand je construis la validation du formulaire php et la partie insert de base de données pour le formulaire, j'ai été manuellement en passant par le html et en tirant toutes les id à la référence à partir du tableau $_post pour la validation d'entrée et l'insert de base de données. Cela a pris beaucoup de temps et a été douloureux, souvent entaché d'erreurs de frappe.

le formulaire sur lequel je travaille actuellement est juste trop grand, et je préférerais écrire une fonction javascript que je peux exécuter sur mon local copie de la page pour énumérer toutes les id de sorte que je n'ai pas à les copier et coller un par un, ou les écrire. Je pourrais alors aussi utiliser la boucle javascript pour imprimer le code php autour des noms d'id de sorte que je n'aurais qu'à copier la liste et à éditer légèrement les id dont je n'ai pas besoin... J'espère que vous les gars eu l'idée.

N'importe quelles suggestions sur la façon dont je peux déposer tous les id 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). Aussi, des suggestions sur la façon d'accélérer le processus de production de grandes formes 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é!

24
demandé sur Willi Mentzel 2011-08-19 02:42:39
la source

8 ответов

les navigateurs modernes vous pouvez le faire via

document.querySelectorAll('*[id]')

devrait faire l'affaire.

Si vous avez besoin de tous les descendants de myElement avec L'IDs, puis faire

myElement.querySelectorAll('*[id]')

Si vous voulez être vraiment prudent d'exclure <span id="">, alors peut-être

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

si la compatibilité avec les navigateurs plus anciens 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 Id allIds.

Si vous trouvez que vous avez besoin juste énumérer les Id sous une forme particulière nœud, vous pouvez remplacer document.getElementsByTagNamemyFormNode.getElementsByTagName.

si vous voulez inclure à la fois les ID et les noms, alors mettez

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

en dessous du if ci-dessus.

37
répondu Mike Samuel 2017-04-08 17:39:52
la source

si vous faites votre développement en utilisant un navigateur assez moderne, vous pouvez utiliser querySelectorAll(), puis utilisez 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'IDs, utilisez Array.prototype.map:

var arr = Array.prototype.map.call( ids, function( el, i ) {
    return el.id;
});
17
répondu user113716 2011-08-19 02:51:37
la source

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

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

exemple pratique ici:http://jsfiddle.net/RichieHindle/yzMjJ/2/

7
répondu RichieHindle 2011-08-19 02:48:13
la source

Obtenir toutes les balises 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);
}
7
répondu Joe 2014-02-07 19:03:37
la source

eh bien, puisque c'est une forme, im sûr que vous voulez effectuer une itération uniquement sur la forme des éléments et non pas toutes les balises dans le document ( comme le href , div, etc..... )

for (var i=0; i < form.elements.length; i++) {
   var elementId = form.elements[i].id;
}
5
répondu Dementic 2013-12-23 15:33:26
la source

avec jQuery

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

c'obtient tous les éléments dans le DOM, et exécute une fonction sur chacun de retourner l'id (et si undefined, retour null ne retourne rien. Retourne un objet jQuery qui est ensuite converti en un tableau JavaScript get() et ceci est ensuite converti en chaîne d'ids séparées par des virgules.

sur cette page, et vous obtenez

3
répondu Russ Cam 2011-08-19 02:46:07
la source

une solution ES6 simple (es2015) basée sur la réponse de utilisateur 113716

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
répondu Theuns Coetzee 2018-05-18 12:09:56
la source

tout d'abord, je recommande vivement jQuery. Il a simplifié mon développement JavaScript tellement. (Voir RichieHindle réponse)

deuxièmement, je sais que beaucoup de navigateurs gardent une liste d'ID pour un accès direct (rapide), mais je ne sais pas comment y accéder. Ce serait probablement spécifique au navigateur de toute façon, donc ce n'est probablement pas la meilleure route.

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
-1
répondu RustyTheBoyRobot 2011-08-19 03:17:03
la source

Autres questions sur