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

**Lareine** · 29/10/2005, 16h31

Dans une fonction j'ai:

Code :

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

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

!

**Lareine** · 29/10/2005, 22h23

Aucune idée

?

**Mr N.** · 29/10/2005, 22h28

tu fais un merge des deux appels ('div') et ('td') et tu traites le tableau de maniere transparente...

**Lareine** · 29/10/2005, 22h48

Ou là

...

ça veut dire quoi tout ça

?
çà s'écrit comment en JavaScript

?

**Mr N.** · 29/10/2005, 23h16

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

Code :

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

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

**Lareine** · 30/10/2005, 10h13

Intéressant

!

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

Code :

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

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 :

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

...

**Mr N.** · 30/10/2005, 15h56

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

**Lareine** · 30/10/2005, 19h12

Ça fonctionne qu'avec div mais ça avance

....
faudrait-il mettre un return tds; aussi :o ?

**Mr N.** · 30/10/2005, 19h32

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 :

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

**Lareine** · 30/10/2005, 20h02

Ca ne fonctionne pas dans mon *.js

Voilà le html dans ma page

Code :

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

<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

?

**Mr N.** · 30/10/2005, 20h12

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

**Lareine** · 30/10/2005, 20h21

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

...
Mais ça ne fonctionne toujours pas

...

**Mr N.** · 31/10/2005, 09h35

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

**Lareine** · 31/10/2005, 13h37

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 :

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

....
Et du coup ma page affiche çà

!? :

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

???

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

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

!

*.css

Code :

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

1
2
.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; }
td.bouton,a.bouton { padding:1px; border-color:white; }

*.js

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

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

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 !

**Mr N.** · 01/11/2005, 10h18

Duplication de code =>

C'est qui ces programmeurs de mes deux qui te conseillent de dupliquer ton code

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

Si il faut te macher le boulot =>

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

**Lareine** · 01/11/2005, 12h12

Envoyé par Mr N.

Duplication de code =>

C'est qui ces programmeurs de mes deux qui te conseillent de dupliquer ton code

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

Si il faut te macher le boulot =>

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

!

Voilà une solution qui à encore plus de gueule

!

Et si je veux rajouter la gestion de <a>

!

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

!

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

?

**Mr N.** · 01/11/2005, 14h12

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

**javatwister** · 01/11/2005, 14h53

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

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

**Lareine** · 01/11/2005, 15h22

Envoyé par Mr N.

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 :

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

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

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

!

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

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

!

**Mr N.** · 01/11/2005, 15h35

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.

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

JavaScript

Discussions similaires

Partager

Partager