[HTML / JS] getelementbyid aidez moi !!!

getelementbyid aidez moi !!! [HTML / JS] - HTML/CSS - Programmation

Marsh Posté le 13-11-2002 à 15:06:25    

Salut,
j'aimerais obtenir tous les ID d'une page HTML avec du Javascript mais je ne sais pas comment faire ... peut être avec DOM ? ou ya t'il une solution plus facile et rapide ? j'aimerais par exemple que:
 
 

Code :
  1. <html>
  2. <body>
  3.   <div id="/1/">
  4.     <div id="/1/a">pouet</div>
  5.   </div>
  6.   <div id="/2/"></div>
  7. </body>
  8. </html>


la fonction ou quoique ce soit puisse me donner un tableau avec /1/ , /1/a , /2/ etc... !!! aidez moi silvous plait :( je galère je sais pas faire ça et c hyper urgent que j'y arrive :( merci :)

Reply

Marsh Posté le 13-11-2002 à 15:06:25   

Reply

Marsh Posté le 13-11-2002 à 15:11:41    

Commence déjà par corriger tes id :
 
http://www.w3.org/TR/html4/struct/global.html#adef-id

Citation :

This attribute assigns a name to an element. This name must be unique in a document.


Citation :

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-" ), underscores ("_" ), colons (":" ), and periods ("." ).


Message édité par gm_superstar le 13-11-2002 à 15:11:52

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-11-2002 à 15:17:14    

yaisse! bon merci pour le tuyau, ils seront toujours uniques mes ID pask'ils proviennent d'une base de données mais bon je coderai avec des '-' à la place des '/' mais sinon t'as pas une réponse pour balayer les ID ?

Reply

Marsh Posté le 13-11-2002 à 15:22:25    

Code :
  1. ids = new Array();
  2. elems = document.getElementsByTagName("div" );
  3. for(i=0;i<elems.length;i++)
  4. {
  5.   ids[i] = elems.id; //ou un truc du genre, a verifier
  6. )

Reply

Marsh Posté le 13-11-2002 à 15:29:37    

cool :) c une façon de le faire!
mais est-ce possible, d'une certain façon, de faire :
 
all_ids = new Array();
 
all_ids = document.getElementById() ;
 
sans préciser lequel et qu'il y mette TOUT ?

Reply

Marsh Posté le 13-11-2002 à 15:34:28    

ben c'est pas le but.
mais vu que tu dis que ces id viennent d'une base, pourquoi tu genererais pas le tableau en meme temps que la page  :??:

Reply

Marsh Posté le 13-11-2002 à 15:56:04    

k666 a écrit a écrit :

cool :) c une façon de le faire!
mais est-ce possible, d'une certain façon, de faire :
 
all_ids = new Array();
 
all_ids = document.getElementById() ;
 
sans préciser lequel et qu'il y mette TOUT ?



Non ça marche pas comme ça. Si tu veux récupérer tous les ids d'un élément particulier (DIV par exemple) dans ce cas la méthode de lorill est la bonne.
 
Si par contre tu as des ids sur tout un tas d'éléments différents ben il faut parcourir tout l'arbre DOM avec une chouette fonction récursive :)
 
 
Pour un élément donné :  
 - S'il a un attribut ID, le mettre dans le tableau.
 - S'il a des enfants :
   - Appeler la fonction pour chacun de ses enfants.
 
 
Mais il est clair que si les ids sont connus dans la base autant faire la requête qui va bien pour remplir dès le début le tableau JavaScript.


Message édité par gm_superstar le 13-11-2002 à 15:56:31

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-11-2002 à 16:04:21    

en fait j'essaye de changer dynamiquement la classe de mes éléments en fonction de certaines actions sur ceux ci, mais c'est controlé par un autre frame qui gère tout l'affichage ... maintenant je suis confronté à un ptit bug de IE je ne sais pas à quoi ça peut être du :( si vous pouvez m'aider ! j'ai deux exemples : un exemple dans lequel je change directement toutes les classes de mes trucs et un autre dans lequel j'alerte à chaque changement, le premier exemple me rend le tout transparent et c hyper chaint paske ça marche pas du coup :( par contre le deuxième, vu quia une alerte, je ne sais pourquoi il arrive à tout bien faire comme je lui ai dit ! si vous pouvez m'aider :) sur mozilla ça marche nickel mais pas sur IE et je sais pas quoi faire pour réparer ça: donc
 
1er exemple:

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  4. <head>
  5.  <style>
  6.   .uninitialized {
  8.   }
  9.   .init {
  10.    position:absolute;
  11.    top:20px; left:20px;
  12.    display:block;
  13.    font-size:30;
  14.   }
  16.   .doss_lev1_out {
  17.    position:relative;
  18.    left:10px;
  19.    font-size:16;
  20.   }
  22.   .doss_lev2_out {
  23.    position:relative;
  24.    left:20px;
  25.    font-size:14;
  26.   }
  28.   .doss_lev3_out {
  29.    position:relative;
  30.    left:30px;
  31.    font-size:12;
  32.   }
  34.   .act_lev1_out {
  35.    position:relative;
  36.    left:15px;
  37.    font-size:16;
  38.   }
  40.   .act_lev2_out {
  41.    position:relative;
  42.    left:25px;
  43.    font-size:14;
  44.   }
  46.   .act_lev3_out {
  47.    position:relative;
  48.    left:35px;
  49.    font-size:12;
  50.   }
  52.  </style>
  53. </head>
  55. <body onload="javascript:comeon('/1057/');">
  57.  <script>
  59.   function scanAndSet(do_what)
  60.   {
  61.    ids = new Array();
  62.    elems = document.getElementsByTagName("div" );
  63.    for(i=0;i<elems.length;i++)
  64.    {
  65.     if (elems[i].id.indexOf(do_what) == 0)
  66.     {
  67.      tmp = elems[i].id.split("/" );
  68.      level = tmp.length - 2 ;
  69.      if ( tmp[tmp.length-1] == "" )
  70.      {
  71.       nclass = "doss_lev"+level+"_out";
  72.      // alert(nclass);
  73.       document.getElementById(elems[i].id).className = nclass;
  74.      }
  75.      else
  76.      {
  77.       document.getElementById(elems[i].id).className = "act_lev"+level+"_out";
  78.      }
  79.     }
  80.    }
  81.   }
  83.   function comeon(do_what)
  84.   {
  85.    document.getElementById(do_what).className = "init";
  86.    window.setTimeout('scanAndSet('+do_what+')','1000');
  87.   }
  88.  </script>
  90.  <div id="/1057/" class="uninitialized">
  91.   Test avec URLS bidon
  92.   <div  id="/1057/1058/">
  93.    (x)<A href="javascript:navgoto('/1057/1058');" color="blue">Sites</A>
  94.    <div id="/1057/1058/642">
  95.     (o)<A href="javascript:navgoto('/1057/1058/642');">Google site</A>
  96.    </div>
  97.    <div id="/1057/1058/641">
  98.     (o)<A href="javascript:navgoto('/1057/1058/641');">Forum hardware</A>
  99.    </div>
  100.    <div id="/1057/1058/643">
  101.     (o)<A href="javascript:navgoto('/1057/1058/643');">LeMonde</A>
  102.    </div>
  103.   </div>
  104.   <div id="/1057/1059/">
  105.    (x)<A href="javascript:navgoto('/1057/1059');">Images</A>
  106.    <div id="/1057/1059/644">
  107.     (o)<A href="javascript:navgoto('/1057/1059/644');">Doggy</A>
  108.    </div>
  109.    <div id="/1057/1059/649">
  110.     (o)<A href="javascript:navgoto('/1057/1059/649');">image sympa</A>
  111.    </div>
  112.    <div id="/1057/1059/650">
  113.     (o)<A href="javascript:navgoto('/1057/1059/650');">imageotte</A>
  114.    </div>
  115.   </div>
  116.  </div>
  117. </body>
  118. </html>


 
et deuxième exemple:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  4. <head>
  5.  <style>
  6.   .uninitialized {
  8.   }
  9.   .init {
  10.    position:absolute;
  11.    top:20px; left:20px;
  12.    display:block;
  13.    font-size:30;
  14.   }
  16.   .doss_lev1_out {
  17.    position:relative;
  18.    left:10px;
  19.    font-size:16;
  20.   }
  22.   .doss_lev2_out {
  23.    position:relative;
  24.    left:20px;
  25.    font-size:14;
  26.   }
  28.   .doss_lev3_out {
  29.    position:relative;
  30.    left:30px;
  31.    font-size:12;
  32.   }
  34.   .act_lev1_out {
  35.    position:relative;
  36.    left:15px;
  37.    font-size:16;
  38.   }
  40.   .act_lev2_out {
  41.    position:relative;
  42.    left:25px;
  43.    font-size:14;
  44.   }
  46.   .act_lev3_out {
  47.    position:relative;
  48.    left:35px;
  49.    font-size:12;
  50.   }
  52.  </style>
  53. </head>
  55. <body onload="javascript:comeon('/1057/');">
  57.  <script>
  59.   function scanAndSet(do_what)
  60.   {
  61.    ids = new Array();
  62.    elems = document.getElementsByTagName("div" );
  63.    for(i=0;i<elems.length;i++)
  64.    {
  65.     if (elems[i].id.indexOf(do_what) == 0)
  66.     {
  67.      tmp = elems[i].id.split("/" );
  68.      level = tmp.length - 2 ;
  69.      if ( tmp[tmp.length-1] == "" )
  70.      {
  71.       nclass = "doss_lev"+level+"_out";
  72.       alert(nclass);
  73.       document.getElementById(elems[i].id).className = nclass;
  74.      }
  75.      else
  76.      {
  77.       document.getElementById(elems[i].id).className = "act_lev"+level+"_out";
  78.      }
  79.     }
  80.    }
  81.   }
  83.   function comeon(do_what)
  84.   {
  85.    document.getElementById(do_what).className = "init";
  86.    window.setTimeout('scanAndSet('+do_what+')','1000');
  87.   }
  88.  </script>
  90.  <div id="/1057/" class="uninitialized">
  91.   Test avec URLS bidon
  92.   <div  id="/1057/1058/">
  93.    (x)<A href="javascript:navgoto('/1057/1058');" color="blue">Sites</A>
  94.    <div id="/1057/1058/642">
  95.     (o)<A href="javascript:navgoto('/1057/1058/642');">Google site</A>
  96.    </div>
  97.    <div id="/1057/1058/641">
  98.     (o)<A href="javascript:navgoto('/1057/1058/641');">Forum hardware</A>
  99.    </div>
  100.    <div id="/1057/1058/643">
  101.     (o)<A href="javascript:navgoto('/1057/1058/643');">LeMonde</A>
  102.    </div>
  103.   </div>
  104.   <div id="/1057/1059/">
  105.    (x)<A href="javascript:navgoto('/1057/1059');">Images</A>
  106.    <div id="/1057/1059/644">
  107.     (o)<A href="javascript:navgoto('/1057/1059/644');">Doggy</A>
  108.    </div>
  109.    <div id="/1057/1059/649">
  110.     (o)<A href="javascript:navgoto('/1057/1059/649');">image sympa</A>
  111.    </div>
  112.    <div id="/1057/1059/650">
  113.     (o)<A href="javascript:navgoto('/1057/1059/650');">imageotte</A>
  114.    </div>
  115.   </div>
  116.  </div>
  117. </body>
  118. </html>


 
merci d'avoir le courage de tester :) je ne sais pas pourquoi dans le premier exemple rien ne s'affiche ! :'(

Reply

Marsh Posté le 13-11-2002 à 16:28:14    

bon c plus facile peut être avec des liens :D
 
celle qui marche pas:
 
http://kpoman.dyndns.org/test_js_css.html
 
 
celle qui marche (que paskia une alert)
 
http://kpoman.dyndns.org/test_js_css2.html
 
 
voilà si vous pouviez m'aider siouplé :'( je pense que c un bug mais peut être que vous sauriez me dire ?

Reply

Marsh Posté le 13-11-2002 à 16:39:27    

Heu... quel est le but de ton JavaScript ? Juste appliquer un style particulier à un élément en fonction de son niveau dans l'arbre ?


Message édité par gm_superstar le 13-11-2002 à 16:40:00

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-11-2002 à 16:39:27   

Reply

Marsh Posté le 13-11-2002 à 17:00:26    

ouais en fait je dois gérer bcp d'états et de styles en fonction de plusieurs paramètres ... je génère d'abord via une bdd+xml+xsl une structure de DIVs avec des ID, puis après via une API que je suis entrain de faire je gère complètement l'affichage ... il faut donc créer une super feuille de style css de malades avec tous les cas possibles, du style:
 
.dossier_niveau1_mouseon_nonclickable {
 /* le style ici */
}
 
ou alors
 
.activite_niveau2_mouseout_clickable {
 /* le style ici */
}
 
 
etc...
 
je viens de me rendre compte que, dans mon premier lien, si on resize la page ça s'affiche du coup :( c bête :( du coup je sais pas comment faire :'(

Reply

Marsh Posté le 13-11-2002 à 17:11:29    

en fait on est entrain de réaliser une interface de navigation assez modulaire,
mais je galère avec ces styles et tout le bordel paske des fois ça passe pas, je crois que netscape a du mal pour positionner des div absolus ou relatifs ou un truc du genre ?

Reply

Marsh Posté le 13-11-2002 à 17:22:53    

Bon désolé j'ai pas le courage de me plonger dans ton truc, mais sache qu'il est possible d'associer plusieurs styles à un élément :
 
class="document niveau1 clickable"
 
tu as ensuite tes styles séparés :
 
.document {
 ...
}
 
.niveau1 {
 ...
}
 
.clickable {
 ...
}
 
div:hover {
 ...
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed