[Résolu] DHTML et sélection d'élément enfant

Bonjour,

J'essaye de faire un script qui me permettrait de changer le contenu d'un fieldset à son survol d'un des items contenu dans le fieldset. Le problème c'est que je n'arrives pas à accéder correctement aux enfants du fieldset. J'ai essayer de voir ou ça merdait avec des alert en javascript mais je ne vois pas pourquoi ça ne fonctionne pas, surtout que en testant ce script sur une autre div qui a un id ça marche.

Donc là je commence à sécher

Pouvez vous me dire ou est le problème? Merci

voici le HTML, suivit du javascript:

<div id="professionnel">
					<fieldset>
						<legend>Produits</legend>
						<ul>
							<li><a onMouseOver="javascript:fenetres_professionnel()" href="/Laurent Fenêtres/public/html/index.html"><img src="/Laurent Fenêtres/public/images/fenetres_petit.png" alt="Fenêtres"/>> Fenêtres</a></li>
							<li><a href="/Laurent Fenêtres/public/html/index.html"><img src="/Laurent Fenêtres/public/images/produit.png" alt="Portes"/>> Portes</a></li>
							<li><a href="/Laurent Fenêtres/public/html/index.html"><img src="/Laurent Fenêtres/public/images/produit.png" alt="Coulissantes"/>> Coulissants</a></li>
							<li><a href="/Laurent Fenêtres/public/html/index.html"><img src="/Laurent Fenêtres/public/images/produit.png" alt="Volets battants"/>> Volets Battants</a></li>
							<li><a href="/Laurent Fenêtres/public/html/index.html"><img src="/Laurent Fenêtres/public/images/produit.png" alt="Fenêtres architecturales"/>> Fenêtres Architecturales</a></li>
							<li><a href="/Laurent Fenêtres/public/html/index.html"><img src="/Laurent Fenêtres/public/images/produit.png" alt="Portes fenêtres"/>> Portes Fenêtres</a></li>
						</ul>
					</fieldset>
				</div>

function fenetres_professionnel()
{
	var professionnel = document.getElementById("professionnel");
	alert(professionnel);
	var fieldset = professionnel.firstChild;
	alert(fieldset);
	var lulu = fieldset.firstChild;
	alert(lulu);
	fieldset.removeChild(lulu);
}

Modifié par Cristallix (13 Oct 2010 - 09:57)

Bonjour... je ne sais pas si cela va répondre à ta question... mais sait on jamais...

Fieldset est une balise et comme toute balise peut recevoir les attributs ID CLASS etc

Donc si ton truc fonctionne avec un id.. et bien met un id à ton fieldset

Merci pour cette réponse mais oui j'y ai déjà pensé, mais en fait j'ai pas spécialement envie d'en mettre un, et surtout ça m'apprend comment à me servir du DHTML.

Sinon j'ai trouvé une solution pour faire fonctionner en gardant l'id qui sert déjà: mais j'ai dû me servir de childNodes. Mais le comportement est quand même étrange.

function fenetres_professionnel()
{
	var professionnel = document.getElementById("professionnel");
	var fieldset = professionnel.childNodes;
	var lulu = fieldset[1].childNodes;
	fieldset[1].removeChild(lulu[3]);
}

Genre ici pour supprimer le ul, j'ai dû me servir du node N°3 O_o, et là j'ai pas trop compris pourquoi...

Bonjour,

En effet, le parcours des éléments enfants d'un élément se fait par la propriété childNodes.
Le fonctionnement peut paraître étrange si l'on ne sait pas qu'un passage à la ligne ou un espace entre les nœuds peut être considéré comme un nœud enfant de type texte.

Pour cela, il est nécessaire de tester la valeur de la propriété nodeType (valorisée à 1 pour un nœud élément et à 3 pour un nœud texte).

Juste un exemple pour illustrer :

for (var i = 0; i < monnoeud.childNodes.length; i++) { 
   if (monnoeud.childNodes[ i ].nodeType == 1) {

   }
}

Retirer l'espace entre "[ i" et entre "i ]".

Bonne continuation.
Romain

PS : Mauvais emploi du fieldset (utile pour les regroupements de champs de formulaire) soit dit en passant.
Modifié par yodaswii (12 Oct 2010 - 16:20)

Merci beaucoup yodaswil, je ne savais pas pour le fonctionnement des passages à la ligne ou des espaces. Et encore merci pour ton code, pour le coup c'est plus propre comme ça.

Sinon je sais que le fieldset est surtout utilisé pour les formulaires, mais j'aime bien sa représentation alors je m'en suis servis et puis son utilisation ne pose pas trop de problème .