Collection pour DIV ?

**Bernard Grosdoy** · 28/02/2006, 12h02

Bonjour, afin de les modifier (visibles, invisibles) je voudrais pouvoir acceder par un boucle à tous les elements se situant dans un DIV (identifie par un ID)

Est-ce possible, ou ne puis-je faire l'economie d'identifier tous les éléments et changer les propriétés pour chacun successivement?

Rd : GetElementById ne me permet pas d'acceder a une colection me semble-t'il

Merci

**SpaceFrog** · 28/02/2006, 12h07

Code :

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

var MacollectiondeDIVS=document.getElementById('container').getElementsByTagName('div')

**Bernard Grosdoy** · 28/02/2006, 12h36

Merci pour les fonctions l'utilisation des conbinées des get

Cependant , je dois laisser une erreur enorme car la longeur de ma collection est 0 ...

Les elements table, tr td, input, select ... sont-ils intégrés dans la collection ?

ou est la faute ?

HTML :

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
<DIV id="container"> 
	<table align="center">
	   <tr>
		<td >libelle : </td>
		<td ><input type="text" maxlength="64" size= "30" 
			name="LIB" value="value_libelle"></td>
	  </tr>	
	  <tr>
 
                <td>Libelle2 : </td>
		<td><input type="text" maxlength="64" size= "30"
			name="LIB2" value="LIBELL2"></td>
	   </tr>	
	</table>
</DIV>

Javascript

Code :

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

var MacollectiondeDIVS=document.getElementById('container').getElementsByTagName('div')

**SpaceFrog** · 28/02/2006, 12h52

j'avais compris que tu voulais récupérer une collection de div...

à quels éléments souhaites tu accéder ? aux tr aux td ?

remplace div par le type d'element auquel tu souhaites acceder ...

si c'est à tous les éléments remplace div par * mais ta collection sera un ramassis d'elements divers ...

**Bernard Grosdoy** · 28/02/2006, 13h13

Merci !
LE code javascript est bien

Code :

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

var MacollectiondeDIVS=document.getElementById('container').getElementsByTagName('*')

A priori tous les elements balistiques sont bien pris en compte.

A noter
Dans le cas d'un passge invisible-visible :
Cette propriété passée sur une table entraine la visibilité_invisibilité de l'ensemble inclus (tr, td, input ...).
Dans mon cas précis, il est donc "inutile" de parcourir, il suffit d'identifier la table et de modifier sa propriete a elle seulement
Je reconnais cependant que l'usage redondant div table n'est pas génial.

un autre élément cependant à prendre en compte :
Sous mozilla , mais pas sous ie, un element passé à invisible, puis visible semble "perdre" ses autres attributs ==> mise en page déstructurée.

Si je ne switche que la table, il n'y a que la balise Table qui perd ses attributs (largeurs...)

Merci

**Resyek** · 28/02/2006, 14h33

J'ai l'impression que ce que tu cherches à faire, c'est un affichage de type "onglet". Ta page possède x blocs d'informations, tu n'en affiches qu'un à la fois, les x-1 autres étant invisibles (display=none).

J'utilise une fonction trouvée sur Internet, c'est très pratique.
Tout réside dans le "nommage" de tes éléments : il faut que ce soit monNomElementi.
Dans mon cas, la fonction "montre" sert à deux choses:
1/ Masquer toutes les DIV et afficher celle dont j'ai besoin.
2/ Changer le style de l'onglet en lui même.

Tu peux mettre ce "switch" sur une listbox, et virer ainsi tout ce qui concerne le changement de style des onglets.

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
/* Gestion de l'affichage des onglets. */
function montre(id) {
 
var d = document.getElementById(id);
var li_d = document.getElementById("li_"+id);
 
for (var i = 1; i<=3; i++) {
	if (document.getElementById('onglet'+i)) {
		document.getElementById('onglet'+i).style.display='none';
	}
 
	if (document.getElementById('li_onglet'+i)) {
		document.getElementById('li_onglet'+i).setAttribute("class","false");
		document.getElementById('li_onglet'+i).setAttribute("className","false");
	}
}
 
	 d.style.display='block';
 
	 /* Pour les vrais browsers ;-) */
	 li_d.setAttribute("class","true");
	 /* Pour IE */
	 li_d.setAttribute("className","true");	 
 
 
}

La définition des "onglets" (que l'on peut cliquer pour changer de DIV affiché)

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
		<DIV class="onglet">
		<ul>
			<LI onclick="javascript:montre('onglet1');" id="li_onglet1" class="true">
				<html:link href="#">
				<fmt:message>donneesGenerales</fmt:message>
				</html:link>
			</LI>
			<LI onclick="javascript:montre('onglet2');" id="li_onglet2" class="false">
				<html:link href="#">
				<fmt:message>modifPays</fmt:message>
				</html:link>
			</LI>
			<LI onclick="javascript:montre('onglet3');" id="li_onglet3" class="false">
				<html:link href="#">
				<fmt:message>modifMCC</fmt:message>
				</html:link>
			</LI>
		</ul>
		</DIV>

Et le contenu en lui même

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
 
<!-- ONGLET 1 -->		
<DIV id="onglet1">
[Contenu varié et divers....]
</DIV>
 
<!-- ONGLET 2 -->		
<DIV id="onglet2">
[Contenu varié et divers....]
</DIV>
 
<!-- ONGLET 3 -->		
<DIV id="onglet3">
[Contenu varié et divers....]
</DIV>

**Bernard Grosdoy** · 28/02/2006, 15h06

J'ai l'impression que ce que tu cherches à faire, c'est un affichage de type "onglet". Ta page possède x blocs d'informations, tu n'en affiches qu'un à la fois, les x-1 autres étant invisibles (display=none).

Non, non, il s'agit d'un bloc unique d'informations supplementaires visibles, ou a completer ou non en fonction d'un boolean.

Question subsidiaire, vaut-il mieux utilisere display ou visibility ? ( dans le cas ou on n'applique pas de class)

**SpaceFrog** · 28/02/2006, 15h11

tout dépend de l'effet recherché ...

un visibility ne fait que masquer l'objet, il reste dans le flux de la page et sa place rester résevée ...

un display none supprime l'objet du flux de la page et l'element suivant du flux vient prendre sa place ...

donc soit tu laisse un blanc (visibility) soit tu vires complètement l'objet de la page (display)...

**Bernard Grosdoy** · 28/02/2006, 15h47

Envoyé par SpaceFrog

tout dépend de l'effet recherché ...
un visibility ne fait que masquer l'objet, il reste dans le flux de la page et sa place rester résevée ...
un display none supprime l'objet du flux de la page et l'element suivant du flux vient prendre sa place ...
donc soit tu laisse un blanc (visibility) soit tu vires complètement l'objet de la page (display)...

merci.

Je fais une derniere remarque pour clore, a propos de repercution de changements d'attributs, continuer necessiterait sans doute un autre post.

Contrairement à ce que j'ai ecrit au début de cette discussion pour les DIV il n'est pas besoin non plus d'invoquer la collection pour repercuter la propriete visible-non visible ( mes essais de code ce matin n'étaient pas assez rigoureux ...

)
modifier le display de la balise DIV suffit,
Ceci que l'on utilise display ou bien visibility : tout ce qui est entre les balises prend le même style.

Par contre l'utilisation de la collection me servira quand même sur autre chose pour trier ...

Merci encore

**SpaceFrog** · 28/02/2006, 16h05

pas forcément ...

par exemple :

Code :

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

1
2
3
<div style='visibility:hidden'>
    <div style='visiblity:visible'>coucou</div>
</div>

comportement pour le moins curieux ...

**Bernard Grosdoy** · 28/02/2006, 18h08

Oui, oui, bien sur

Mais j'essaie d'etre coherent, et dans la mesure où je manipule fonctionellement et logiquement des Blocs à comportement analogue, je n'utilise et ne modifie la propriete que pour une seule balise ...

sinon, effectivement, on s'arrche vite les cheveux

Collection pour DIV ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager