getElementsByTagName ('*') 2balises dans la boucle test ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

29/10/2005, 16h31
Lareine

getElementsByTagName ('*') 2balises dans la boucle test ?

Dans une fonction j'ai:

Code:

boutonElements=document.getElementsByTagName('td')

J'aimerais en plus de td que la fonction gère la balise div
Comment faire pour la rajouter :? ?

Merci d'avance pour votre réponse :) !
29/10/2005, 22h23
Lareine

Aucune idée :? ?
29/10/2005, 22h28
Mr N.

tu fais un merge des deux appels ('div') et ('td') et tu traites le tableau de maniere transparente... :)
29/10/2005, 22h48
Lareine

Ou là :oops: ...

ça veut dire quoi tout ça :( ?
çà s'écrit comment en JavaScript :? ?

Je sais pas si il y a plus léger :

Code:

1
2
3
4
5
6
7
8
function getDivOrTd() {
   divs = document.getElementsByTagName('div');
   tds  = document.getElementsByTagName('td');
   for(i = 0 ; i < tds.length ; i++) {
      divs[divs.length] = tds[i];
   }
   return divs;
}

Intéressant :P !

Et comment puis-je faire pour que ça s'intègre à ce script externe :o ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function bordure(bouton) 
{ 
  boutonElements=document.getElementsByTagName('td') 
  for (b=0;b<boutonElements.length;b++){ 
  if(boutonElements[b].className==bouton){ 
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

Avec la prise en charge de td ou div :) ?

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
function bordure(bouton) 
{ 
 {
   divs = document.getElementsByTagName('div'); 
   tds  = document.getElementsByTagName('td'); 
   for(b = 0 ; b < tds.length ; b++) { 
      divs[divs.length] = tds[b]; 
   } 
   return divs; 
} 
{ 
  if(divs[b].className==bouton){ 
  divs[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  divs[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  divs[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone
  } 
  if(tds[b].className==bouton){ 
  tds[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  tds[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  tds[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

J'ai essayé de l'inclure comme-çà, mais ça ne fonctionne pas :oops: ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function getDivOrTd() {
   divs = document.getElementsByTagName('div');
   tds  = document.getElementsByTagName('td');
   for(i = 0 ; i < tds.length ; i++) {
      divs[divs.length] = tds[i];
   }
   return divs;
}
 
function bordure(bouton) 
{ 
  boutonElements = getDivOrTd();
  for (b=0;b<boutonElements.length;b++){ 
  if(boutonElements[b].className==bouton){ 
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

:roll:

30/10/2005, 19h12
Lareine

Ça fonctionne qu'avec div mais ça avance :) ....
faudrait-il mettre un return tds; aussi :o ?

Au temps pour moi, je n'avais pas testé avant de fournir le code. L'erreur venait de getElementsByTagName qui retourne une collection et pas un array et je ne sais pas comment ajouter un element à une collection. Du coup je passe par un tableau intermédiaire. Essaie le code suivant :

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
<div id="div_1">ggg</div>
<table>
	<tbody>
		<tr><td id="td_1">ggg</td></tr>
		<tr><td id="td_2">ggg</td></tr>
		<tr><td id="td_3">ggg</td></tr>
	</tbody>
</table>
<div id="div_2">ggg</div>
 
<div id="debug" style="border:1px solid red">
<script type="text/javascript">
	function getDivOrTd() {
	   ret  = new Array;
 
	   divs = document.getElementsByTagName('div');
	   for(i = 0 ; i < divs.length ; i++) {
	      ret[ret.length] = divs.item(i);
	   }
 
 
	   tds  = document.getElementsByTagName('td');
	   for(i = 0 ; i < tds.length ; i++) {
	      ret[ret.length] = tds.item(i);
	   }
 
	   return ret;
	}
 
	document.open();
	els = getDivOrTd();
	for (i = 0 ; i < els.length ; i++) {
		document.write(els[i]+" : "+els[i].id+"<br>");
	}
	document.close();
</script>
</div>

30/10/2005, 20h02
Lareine

Ca ne fonctionne pas dans mon *.js

Voilà le html dans ma page

Code:

<div id="gauche" class="bouton"><a href="index.php">DIV à Gauche</a></div><br />

J'ai besoin de l'id pour les positionement :? ....
Je peut pas plutôt utiliser class :( ?
30/10/2005, 20h12
Mr N.

l'id c'est juste pour l'exemple ! pas besoin d'id pour la fonction.

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
function getDivOrTd() { 
      ret  = new Array; divs = document.getElementsByTagName('div'); 
      for(i = 0 ; i < divs.length ; i++) {ret[ret.length] = divs.item(i);} 
      tds  = document.getElementsByTagName('td'); 
      for(i = 0 ; i < tds.length ; i++) {ret[ret.length] = tds.item(i);} 
      return ret; 
   } 
   document.open(); 
   els = getDivOrTd(); 
   for (i = 0 ; i < els.length ; i++) 
   {document.write(els[i]+' : '+els[i].class+'<br>'); 
   } 
   document.close(); 
 
function bordure(bouton) 
{ 
  boutonElements=document.getElementsByTagName('td') 
  for (b=0;b<boutonElements.length;b++){ 
  if(boutonElements[b].className==bouton){ 
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

J'ai écris comme ça en mettant class à la place d'id et en mettant ' à la place de " :oops: ...
Mais ça ne fonctionne toujours pas :? ...

31/10/2005, 09h35
Mr N.

Relis mieux ce que je t'ai proposé et utilise en vrai éditeur qui te permette de savoir où se termine une accolade ouvrante... 8O

Citation:

Envoyé par Mr N.

Relis mieux ce que je t'ai proposé

J'ai essayé tel quel ce que tu ma proposé, tu ma dit essaye ça:
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 <div id="div_1">ggg</div> <table> <tbody> <tr><td id="td_1">ggg</td></tr> <tr><td id="td_2">ggg</td></tr> <tr><td id="td_3">ggg</td></tr> </tbody> </table> <div id="div_2">ggg</div> <div id="debug" style="border:1px solid red"> <script type="text/javascript"> function getDivOrTd() { ret = new Array; divs = document.getElementsByTagName('div'); for(i = 0 ; i < divs.length ; i++) { ret[ret.length] = divs.item(i); } tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { ret[ret.length] = tds.item(i); } return ret; } document.open(); els = getDivOrTd(); for (i = 0 ; i < els.length ; i++) { document.write(els[i]+" : "+els[i].id+"<br>"); } document.close(); </script> </div>
Donc j'ai collé ce code au millieu d'une page d'exemple :roll: ....
Et du coup ma page affiche çà 8O !? :
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 ggg ggg ggg ggg ggg [object] : cadrepage [object] : div_1 [object] : div_2 [object] : debug [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : td_1 [object] : td_2 [object] : td_3
Je fait quoi avec le résultat obtenu :? ???

Citation:

Envoyé par Mr N.

et utilise en vrai éditeur qui te permette de savoir où se termine
une accolade ouvrante...

J'ai utilisé Dreamweaver UltraEdit et NotePad2. Et à part dans NotePad2
qui affiche en rouge la fin ou le début d'une accolade séléctionné, je n'ai vue
aucune fonction de vérification d'accolade :? ...
J'ai vérifié manuellement, tout les accollades de fin ont une de début dans
ma fonction bordure, puisquelle fonctionne :) !

De toutes façons je crois que je n'ais pas postés la question dans le bon sens…
J'ai donc reformulée ma demande dans un autre poste qui correspond plus
Précisément à ma demande :oops: ...
http://www.developpez.net/forums/viewtopic.php?t=412960

Encore merci pour ta patience :o !

===================================================

Entre temps j'ai eu la solution sur un autre forum...
Il suffit simplement de répéter le contenu de la fonction avec ses accolades,
en modifiant la valeur du TagName à chaque fois. La fonction effectue alors
autant d'opérations qu'il à d'attributs :wink: !

*.css
Code:

1 2 .bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; } td.bouton,a.bouton { padding:1px; border-color:white; }
*.js
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 function bordure(bouton) { boutonElements=document.getElementsByTagName('td') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } boutonElements=document.getElementsByTagName('div') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } boutonElements=document.getElementsByTagName('a') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
Code:

1 2 3 4 5 6 7 8 9 <table> <tr> <td class="bouton"><a href="index.php">Acceuil</a></td> </tr> </table> <div class="bouton"><a href="index.php">Acceuil</a></div> <a class="bouton" href="index.php">Acceuil</a>
Le principe consiste à rendre utilisable la fonction bordure Inset pour les
version d'Internet Explorer ne supportant pas les style css hover
et active avec a, div et td :) !

Merci à PRoGRaFLaSH

Problème Résolu donc :o !

Duplication de code => :vomi:
C'est qui ces programmeurs de mes deux qui te conseillent de dupliquer ton code 8O :furax:

Merci Majesté, je sais où ne pas aller quand j'ai un problême :twisted:

Si il faut te macher le boulot =>

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
function getDivOrTd() {
      ret  = new Array;
 
      divs = document.getElementsByTagName('div');
      for(i = 0 ; i < divs.length ; i++) {
         ret[ret.length] = divs.item(i);
      }
 
 
      tds  = document.getElementsByTagName('td');
      for(i = 0 ; i < tds.length ; i++) {
         ret[ret.length] = tds.item(i);
      }
 
      return ret;
   }
 
 
function bordure(bouton)
{
  boutonElements=getDivOrTd();
  for (b=0;b<boutonElements.length;b++){
  if(boutonElements[b].className==bouton){
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone
  }
 }
 
}
window.onload = function(){bordure('bouton')};

Citation:

Envoyé par Mr N.

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
function getDivOrTd() {
      ret  = new Array;
 
      divs = document.getElementsByTagName('div');
      for(i = 0 ; i < divs.length ; i++) {
         ret[ret.length] = divs.item(i);
      }
 
 
      tds  = document.getElementsByTagName('td');
      for(i = 0 ; i < tds.length ; i++) {
         ret[ret.length] = tds.item(i);
      }
 
      return ret;
   }
 
 
function bordure(bouton)
{
  boutonElements=getDivOrTd();
  for (b=0;b<boutonElements.length;b++){
  if(boutonElements[b].className==bouton){
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone
  }
 }
 
}
window.onload = function(){bordure('bouton')};

Wow! merci Mr Super N. :bravo: !

Voilà une solution qui à encore plus de gueule :P !

Et si je veux rajouter la gestion de <a> :) !

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
function getTdOrDivOrA() { 
      ret  = new Array; 
 
      tds  = document.getElementsByTagName('td'); 
      for(i = 0 ; i < tds.length ; i++) { 
         ret[ret.length] = tds.item(i); 
      } 
 
      divs = document.getElementsByTagName('div'); 
      for(i = 0 ; i < divs.length ; i++) { 
         ret[ret.length] = divs.item(i); 
      } 
 
      as = document.getElementsByTagName('a'); 
      for(i = 0 ; i < as.length ; i++) { 
         ret[ret.length] = as.item(i); 
      } 
 
      return ret; 
   } 
 
 
function bordure(bouton) 
{ 
  boutonElements=getTdOrDivOrA(); 
  for (b=0;b<boutonElements.length;b++){ 
  if(boutonElements[b].className==bouton){ 
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
} 
window.onload = function(){bordure('bouton')};

Splendide :D !

Au final quel est la solution la plus rapide/stable lors de la navigation :o ?

La tienne qui utilise 2 fonctions :) ?
Ou celle de PRoGRaFLaSH qui lance 3 Operations dans 1 fonction :? ?

01/11/2005, 14h12
Mr N.

Citation:

Envoyé par Lareine

Au final quel est la solution la plus rapide/stable lors de la navigation ...

Tu oublie un critère : maintenable !
Imagine que finalement le traitement appliqué à la bordure n'est plus le meme (changement de souleur, pointillé, grosseur, ...) Et bien dans un cas tu devras modifier trois ligne de code, alors que dans l'autre qu'une seule... Je te laisse deviner quel est le code le plus maintenable 8)

Pour la rapidité, je pense que dupliquer le code sera plus rapide, mais bon... L'ère des 486Mhz est révolue :lol:

vu que les questions de maintenance m'intéressent aussi, je prends la liberté de proposer mon grain de sel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript"> 
 
var n = document.getElementsByTagName("*"); 
 
function actif(){
this.style.borderStyle="inset";
}
 
function inactif(){
this.style.borderStyle="outset";
}
 
for(i=0;i != n.length;i++){
	if(n[i].className=="bouton"){
		n[i].onmousedown=actif;
		n[i].onmouseup=inactif
		n[i].onmouseout=inactif
	}
}
 
</script>

01/11/2005, 15h22
Lareine

Citation:

Envoyé par Mr N.

Citation:

Envoyé par Lareine

Au final quel est la solution la plus rapide/stable lors de la navigation ...

Tu oublie un critère : maintenable !
Imagine que finalement le traitement appliqué à la bordure n'est plus
le meme (changement de couleur, pointillé, grosseur, ...)

Pas trop problèmatique en soit, puisque le style par defaut est définit dans
le *.css: Couleur de fond, Image de fond, Épaisseur de la bordure, Style de la
bordure par défaut (Outset), Couleur de la bordure :o ...
*.css

Code:

.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; }

Citation:

Envoyé par Mr N.

Et bien dans un cas tu devras modifier trois ligne de code, alors que dans l'autre
qu'une seule... Je te laisse deviner quel est le code le plus maintenable 8)

Si je décide (chose peut probable) de changer les valeurs Inset/Outset, le tient
bien sûr :) !

Citation:

Envoyé par Mr N.

Pour la rapidité, je pense que dupliquer le code sera plus rapide, mais bon...
L'ère des 486Mhz est révolue :lol:

Merci de ta franchise. J'ai un Celeron 1.2Ghz, mon autre PC est un PII 400Mhz
et d'autres personnes de mon entourage surfe sur le web avec des machines
encore moins puissantes. Donc ça n'est pas si futile que ça de penser à optimiser
le code pour les utilisateurs qui ont des machines peu puissantes. Dans l'absolu,
ta fonction est plus classieuse, et peut aussi s'appliquer à d'autres fonctions
demandant la gestion de plusieurs attributs :wink: !
01/11/2005, 15h35
Mr N.

Citation:

Envoyé par Lareine

Pas trop problèmatique en soit, puisque le style par defaut est définit dans
le *.css

C'était un exemple parmi tant d'autres...
N'importe quel traitement supplémentaire quelqu'il soit devra être dupliqué trois fois. L'expérience me montre que les copier-coller abusifs sont une vraie plaie dans la vie d'un developpeur...

Sinon conernant les 486, je me suis fourré dedans ! Je voulais parler des modèles 486, genre 486 SX25... Qui tournaient à... 25 Mhz. Au temps pour moi.

Voir 40 message(s) de cette discussion en une page