Discussion :

[enok37]

Bonjour à tous,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[nabab]

Quid d'en faire une fonction recursive?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[enok37]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[m312]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Matthieu2000]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var children = node.getElementByTagname("div");

[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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[roro06]

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[enok37]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[vttman]

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

[danielhagnoul]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[vttman]

Ah je me disais aussi que ça amènerait peut-être une réaction intéressante
Merci danielhagnoul, je regarde ça !

[NoSmoking]

Bonjour,

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

au passage ce code document.querySelectorAll( "[id]" ) est valide et fonctionnel depuis IE8

[vttman]

Ok NoSmoking
IE ça existe encore ? Netscape n'est-il pas mort

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 =>

[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 ...

[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/

[vttman]

ça roule Merci !