Récuperer tous les id d'une page

Version imprimable

25/07/2007, 18h28
enok37

Récuperer tous les id d'une page
Bonjour à tous,

j'aimerais savoir comment faire t-on pour récuperer tous les id d'un div.
J'ai essayé avec :
Code:

1 2 3 var node = document.getElementById('monDiv'); var children = node.childNodes;
Dans "children", je récupère tous les noeuds enfants de "node". Puis pour avoir l'id des noeuds, je fais une boucle du genre :
Code:

1 2 3 4 5 6 for(k=0;children.length;k++) { var monId = children[k].id; // traitement }
Mais mon problème est que je ne récupère que les id des premiers enfants. Je veux aussi récupérer les id des sous noeud voire sous-sous noeud des noeuds enfants.
Ext ce qu'il y a une propriété qui me permet de récuperer tous les id de ma div ?

Le but de cette manip est que, je clone un div (qui contient des div, des images, ...) et je veux changer tous les id du div cloné pour éviter les conflits.

Merci beaucoup

Quid d'en faire une fonction recursive?

C'est juste une idee, j'ai pas teste:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var i = 0;
mesId = array();
function getIds(ele,i,mesId){
var node = document.getElementById(ele);
var children = node.childNodes;
for(k=0;children.length;k++){
  mesId[i] = children[k].id;
  i++;
  if (document.getElementById(children[k].id).childNodes){
  getIds(children[k].id,i,mesId);
  }
}

Merci de ta réponse,
mais ton code ne fonctionne que pour le premier noeud enfant. C'est à dire, je récupère l'id du premier noeud enfant et des ses sous noeuds mais je n'arrive toujours pas à récuperer l'id deuxième enfant. Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div id="div1"> <div id="exemple1"> <div id="exemple11" > <div id="exemple111" >Exemple 111</div> <div id="exemple112" >Exemple 112</div> </div> <div id="exemple12" >Exemple 12</div> <div id="exemple13" >Exemple 13</div> <div id="exemple14" >Exemple 14</div> </div> <div id="exemple2" > <div id="exemple21">Exemple 21</div> </div> <div id="exemple3" >Exemple 3</div> </div> <input type="button" onclick="getIds('div1')"/>
LE problème est que :
je réupère les ids suivant :
exemple1, exemple11, exemple111 et après il y a une erreur du genre :
children[k] has no properties.J'ai don réecris ta fonction pour tester si l'élt existe :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getIds(elt){ var node = document.getElementById(elt); var children = node.childNodes; for(k=0;children.length;k++){ if( document.getElementById(children[k].id)){ alert(children[k].id ); if (document.getElementById(children[k].id).hasChildNodes()){ getIds(children[k].id); } } }
Mais j'ai toujours le même problème. Si quelqu'un a une idée.
Merci d'avance.

Citation:
Envoyé par enok37
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getIds(elt){ var node = document.getElementById(elt); var children = node.childNodes; for(k=0;children.length;k++){ if( document.getElementById(children[k].id)){ alert(children[k].id ); if (document.getElementById(children[k].id).hasChildNodes()){ getIds(children[k].id); } } }
Mais j'ai toujours le même problème. Si quelqu'un a une idée.
Merci d'avance.
C'est pas plutot for (k=0;k<children.length;k++) ?
Javascript permet le resonnement par récurrence ? Je suis ébahi :)

27/07/2007, 13h32
Matthieu2000

Code:

var children = node.getElementByTagname("div");
27/07/2007, 13h34
enok37

merci m312, c'est bien ça. J'ai fait une erreur de frappe. Mais le pb n'est toujours pas résolu.

Ok, matthieu2000, j'essaye ta solution et je vous tiens au courant.
27/07/2007, 14h25
enok37
merci matthieu, elle marche ta solution pour cet exemple. Mais si j'ai d'autres balises melangées avec le div. Par exemple: si ma page contient des balises div, img et h1 alors il faut faire :
Code:

1 2 3 4 var childrenDiv = node.getElementsByTagName("div"); var childrenImg = node.getElementsByTagName("img"); var childrenH1 = node.getElementdByTagName("h1");
Mais je suis quand même étonné qu'il n'existe pas une propriéte qui permet d'avoir tous les id d'une page. Une proriéte du genre :
Code:

1 2 var children = node.getAll();
Le deuixème point qui semble important, comme l'a souligné m312, le javascript permet t-il de faire des fonctions recursive?

Merci de votre contribution.
27/07/2007, 14h26
roro06
Bonjour

Attention de déclarer k en local, sinon ta récurrence risque de s'arreter au premier niveau
Code:

1 2 3 4 function getIds(elt){ var k; ....

Merci roro06 et à tous. Le problème est finalement résolu. Comme tu l'as dit roro06, il fallait, effectivement, ajouter var k;

Donc en résumé, voici la fonction qui permet de récupérer tous les id d'un élément.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
	function getIds(elt){
        var node = document.getElementById(elt);
	var children = node.childNodes;
	var k;
 
	for(k=0;k<children.length;k++){
 
         // On teste si l'id de l'élément est défini
	 if( document.getElementById(children[k].id)){
 
		  alert(children[k].id );
                 //  Ici on fait son traitement. 
 
           if (document.getElementById(children[k].id).hasChildNodes()) 
               {
		  getIds(children[k].id);
		 }
	       }
	 }
 
 }

Le javaScript permet donc de faire des fonctions recursives.
Merci à tous.

24/10/2011, 15h32
Dendrite

Je sais que c'est un vieux sujet résolu, mais je voulais te remercier Enok, j'ai eu la même problématique, et ta solution récursive me sied à merveille.
31/03/2017, 13h22
vttman

Citation:

Envoyé par Dendrite

Je sais que c'est un vieux sujet résolu, mais je voulais te remercier Enok, j'ai eu la même problématique, et ta solution récursive me sied à merveille.

Et moi de même ... mais 6-7 ans après tout de même ;)

:salut:

Cette discussion, malgré son âge, à l'air d'être encore un problème d'actualité. Voici donc un exemple utilisant le JS d'aujourd'hui :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    [id] {
      font-size: 3em;
      width: 10rem;
      border: dotted grey 0.1rem;
      padding: 0.3rem;
    }
  </style>
  <script>
    'use strict';
    
    function beep() {
      let snd = new Audio( "data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
      snd.play();
    }
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
        const ids = document.querySelectorAll( "[id]" );
        
        // ids est une nodeList pas un array
        
        for ( let [ i, id ] of Array.from( ids ).entries() ){
          
          // on ajoute un gestionnaire d'événement si i est pair
          
          if ( i % 2 == 0 ){
            id.addEventListener( "mouseenter", ev => {
              beep();
            }, false );
          }
          
        }
    }, false );
  </script>
</head>
<body>
  <main>
 
    <p id="chiffre">1</p>
    <p id="lettre">un</p>
    <p id="chiffre">2</p>
    <p id="lettre">deux</p>
 
  </main>
</body>
</html>

31/03/2017, 18h47
vttman

Ah je me disais aussi que ça amènerait peut-être une réaction intéressante ;)
Merci danielhagnoul, je regarde ça !
01/04/2017, 09h53
NoSmoking

Bonjour,

Citation:

Envoyé par danielhagnoul

un exemple utilisant le JS d'aujourd'hui...

au passage ce code document.querySelectorAll( "[id]" ) est valide et fonctionnel depuis IE8 ;)
01/04/2017, 10h39
vttman
Ok NoSmoking
IE ça existe encore ? Netscape n'est-il pas mort 8O;)

[MODE VIEUXJEU ON]
Réflexion sur le code fourni par danielhagnoul ...
Code:

1 2 3 4 5 6 ... // ids est une nodeList pas un array for ( let [ i, id ] of Array.from( ids ).entries() ){ // on ajoute un gestionnaire d'événement ...
Celui-ci est pour le moins assez abscons vu mes connaissances, donc je vais avoir du mal à transcrire mon code ainsi
et me relire, c'est un peu comme la différence entre le C et le cobol quand je développais ...
avec le C on faisait parfois un tas de trucs en 2 lignes là où l'équivalent cobol aurait demandé un gros pavé ...
... mais pour se rappeler de ce que ça faisait ces 2 lignes de C, un mois plus tard => :koi:

[MODE VIEUXJEU OFF]

Sinon, pour ma culture générale, je gagne/risque quoi entre continuer à écrire "à l'ancienne" ou utiliser cette nouvelle écriture ?
Rapidité, robustesse, jeunesse ;) ...
01/04/2017, 11h13
danielhagnoul

Array.from : https://developer.mozilla.org/fr/doc...aux/Array/from
let : https://developer.mozilla.org/fr/doc...structions/let

ES2015 : http://exploringjs.com/es6/index.html
ES2016 et ES2017 : http://exploringjs.com/es2016-es2017/
01/04/2017, 13h04
vttman

ça roule Merci !