différence getElementsByTag et getchildren

Version imprimable

Bonjour,
j'ai un p'tit probléme lorsque je recupére un element avec getchildren et que je fais un addevent dessus, cela marche.
En revanche lorsque je récupére ce meme element en parcourant le tableau que j'ai rempli avec la fonction getelementbytagname je n'arrive pas a faire un addevent dessus.
Mon code getchildren
Code:

1 2 myHandle=item.getChildren()[0].getChildren()[0].getChildren()[1].getChildren()[1].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0];
mon code getelementsbytagname
Code:

1 2 3 4 5 6 7 8 9 var mesLignes=item.getElementsByTagName('DIV'); for(i=0;i<mesLignes.length;i++) { if(mesLignes[i].id=='HandleDrag') { myHandle=mesLignes[i]; } }
et mon addevent
Code:

1 2 3 4 myHandle.addEvent('mousedown', function(e) { e = new Event(e).stop(); };
Est ce que quelqu'un aurait une idée?
Merci d'avance

02/10/2007, 13h24
E.Bzz

Bonjour,
essaye déjà avec

Code:

var mesLignes=item.getElementsByTagName('div');

Le libellé du tag doit être en minuscules ;)

A+
02/10/2007, 13h27
locs

je viens de tester avec les minuscules et sa ne change rien.
j'ai comme erreur :
cet objet ne gére pas cette propriété ou methode.

Au niveau de mon addevent
02/10/2007, 13h34
E.Bzz

Citation:

Envoyé par locs

je viens de tester avec les minuscules et sa ne change rien.
j'ai comme erreur :
cet objet ne gére pas cette propriété ou methode.

Au niveau de mon addevent

Je n'ai pas dit qu'il n'y avait que ça : juste que c'est par là qu'il fallait commencer :mrgreen:
Sinon, l'évènement c'est 'onmousedown' et non 'mousedown' ...

A+
02/10/2007, 13h36
locs

je viens de tester avec 'onmousedown' et j'ai toujours la même erreur.
Je comprend pas vraiment pas la.
Ce que je trouve bizarre c'est qu'avec getchildren cela fonctionne.
Et pas lorsque je récupére mon élément avec getelementbytagname????
Bizarre
02/10/2007, 13h40
E.Bzz

Citation:

Envoyé par locs

Ce que je trouve bizarre c'est qu'avec getchildren cela fonctionne.
Et pas lorsque je récupére mon élément avec getelementbytagname????
Bizarre

Ta fonction getchildren() cible certainement un conteneur.
Alors que getElementsByTagName balaye toute ta page ...
Essaye de faire ce même ciblage avec

Code:

document.getElementById('id_conteneur').getElementsByTagName('div')

'id_conteneur' étant le conteneur dont getchildren() récupère les enfants ...

A+

En fait je le fait deja vu que au dessus du code que je vous ai donner je suis dans une boucle, cette boucle étant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $$('.drag .item').each(function(item){ //myHandle=item.getChildren()[0].getChildren()[0].getChildren()[1].getChildren()[1].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0]; var mesLignes=item.getElementsByTagName('div'); for(i=0;i<mesLignes.length;i++) { if(mesLignes[i].id=='HandleDrag') { myHandle=mesLignes[i]; } } myHandle.addEvent('mousedown', function(e) { e = new Event(e).stop(); }; }
Le code complet est défini comme précédement et je ne comprend pas pkoi passer par un document.getelementbyid, vu que dans ma boucle la variable item correspond deja a un objet de ce type.

02/10/2007, 16h08
E.Bzz

Citation:

Envoyé par locs

Le code complet est défini comme précédement et je ne comprend pas pkoi passer par un document.getelementbyid,

Et ben là c'était juste parce que tu nous avais pas donné le code complet :mrgreen:

A+
02/10/2007, 16h10
locs

lol
Par contre je continue a chercher de mon coter et je ne vois pas d'ou cela vient.
Vous auriez une idées?

getchildren parcours page html

Bonjour, est ce que quelqu'un connaitré une fonction qui me permet de parcourir une page html de maniére a trouver un element par rapport a son ID et qui utiliseré getChildren?
C'est pour eviter d'avoir a faire :
Code:

1 2 myHandle=item.getChildren()[0].getChildren()[0].getChildren()[1].getChildren()[1].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0];

02/10/2007, 18h20
E.Bzz

Je pensais que tu pouvais le déduire de ma précédente réponse ...
L'accès via l'ID ne nécessite aucun "parcours" puisqu'il s'agit d'un accès direct.

Code:

ton_element = document.getElementById('id_de_ton_element');

A+
02/10/2007, 18h25
locs
Le probléme qui se pose c que g différent bloc qui ont tous un meme id.
C'est d'ailleur pour ca que j'utilise :
Code:

1 2 3 $$('.drag .item').each(function(item){
qui me permet de parcourir chacun de mais ou je retrouve dans chacun l'element que je veux cibler avec un id identique a chaque fois.

Et le document.getElementById ne fonctionne que pour la totalité de mes documents, or est-il possible de faire la meme chose mais seulement sur un bloc précis de code html d'une page?
02/10/2007, 18h28
E.Bzz

Citation:

Envoyé par locs

Le probléme qui se pose c que g différent bloc qui ont tous un meme id.

Alors ne cherche pas plus loin : c'est là ton principal problème !
Un ID doit toujours être unique dans la page ...

A+
02/10/2007, 18h29
locs

beh je dois bien pouvoir faire en sorte de définir un handle sur des bloc drag&drop avec un id unique en spécifiant que l'élément de cahque ayant cet id sont les handle des blocs??
03/10/2007, 09h46
SpaceFrog

ça nous aiderait sans doute de voir aussi la structure du html scanné ..
03/10/2007, 09h49
Bisûnûrs

Je pense que tu n'as pas le droit d'utiliser le mot "item" comme variable, c'est un mot protégé.

le code html ressemble a ca :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 <tr>
		<td class="drag"><div class="item" mXattribut="id:id_annonce"><table border="0" cellpadding="0" cellspacing="0">
			<tr id="test">
			  <td class="fond-annonce-HG" id="test">&nbsp;</td>
			  <td class="fond-annonce-H" id="test">&nbsp;</td>
			  <td class="fond-annonce-HD" id="test">&nbsp;</td>
			</tr>
			<tr mXattribut="class:classAnnonce">
			  <td class="fond-annonce-G">&nbsp;</td>
			  <td class="fond-annonce">
			  <table border="0" cellpadding="0" cellspacing="0">
				  <tr >
					<td class="fond-titre-annonce"><table width="415" id="test">
 
						<tr>
 
						  <td valign="top"><div id="HandleDrag"><span class="titre-annonce" id="natureLot"><mx:text id="Nature"/></span></div></td>
						  <td>&nbsp;</td>
						  <td class="texte-annonce"><div align="right"><span class="titre-annonce" id="prixLot"><mx:text id="Prix"/></span></div></td>
 
						</tr>
 
					</table></td>
				  </tr>
				  <tr >
					<td >
						<table width="415" >
						  <tr>
							  <td rowspan="2" valign="top"><div class="ImgDetail" style="background-image:url('<mx:text id="imageLot"/>');width:128px;height:95px;z-index:1;background-repeat:no-repeat;" mXattribut="id:id_annonce"></div></td>
							  <td rowspan="2" >&nbsp;</td>
							  <td valign="top" ><span class="texte-annonce"><span onmouseover="montre('<mx:text id="texteLotEntier"/>')" onmouseout="cache();"><mx:text id="texteLot"/></span><br><mx:text id="Ville"/> -<br>, <mx:text id="CodePostal"/>, <mx:text id="Superficie"/>m&sup2;, Ref.<mx:text id="Mandat"/></span>
							  </td>
						  </tr>
						  <tr >
						  <td>
							<table border="0" cellspacing="0" cellpadding="0" >
						 	<tr id="test">
							  <td><img src="themes/theme_0/image/logo/Logo_detail.gif" alt="Localiser" width="16" height="16" mxattribut="onclick:link_jsdetail"/></td>
							  <td>&nbsp;</td>
							  <td><img src="themes/theme_0/image/logo/Logo_localiser.gif" alt="Calculer votre mensualit&eacute;" width="16" height="16" /></td>
							  <td>&nbsp;</td>
							  <td><img src="themes/theme_0/image/logo/Logo_mensualite.gif" alt="Calculer votre mensualit&eacute;" width="16" height="16" /></td>
							  <td>&nbsp;</td>
							  <td><img src="themes/theme_0/image/logo/Logo_imprimer.gif" alt="Imprimer" width="16" height="16" /></td>
							  <td>&nbsp;</td>
							  <td ><img alt="Votre panier" src="themes/theme_0/image/Shopping.png" name="imageDrag" alt="Ajouter a votre panier" id="imageDrag"/></td>				 
							</tr>
    				        </table>
 
						 </td>
			  			</tr>
					</table></td>
				  </tr>
 
			  </table></td>
			  <td class="fond-annonce-D">&nbsp;</td>
			</tr>
			<tr>
			  <td class="fond-annonce-BG">&nbsp;</td>
			  <td class="fond-annonce-B">&nbsp;</td>
			  <td class="fond-annonce-BD">&nbsp;</td>
			</tr>
		</table></div></td>		
	  </tr>

En fait il s'agit de bloc comme celui la qui sont répéter plusieur fois sur ma page.
Avec la boucle :

Code:

1
2
 
$$('.drag .item').each(function(item){.....}

Je parcours chacun de ces blocs afin de positionner sur chacun le handle pours les drag and drop. Cela marche lorsque j'utilise :

Code:

1
2
 
myHandle=item.getChildren()[0].getChildren()[0].getChildren()[1].getChildren()[1].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0];

en revanche lorsque j'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
 
 
var mesLignes=item.getElementsByTagName('div');
		for(i=0;i<mesLignes.length;i++)
		{
			if(mesLignes[i].id=='HandleDrag')
			{
				myHandle=mesLignes[i];	
			}
		}

J'arrive bien a me positioner sur le bon élement par contre au moment d'y affecter l'évenement :

Code:

1
2
3
4
 
	myHandle.addEvent('mousedown', function(e) {
			e = new Event(e).stop();
};

J'ai l'erreur "Cette objet ne supporte pas cette proriété ou cette méthode", ce qui n'est pas le cas avec les getChildren().

Alors je supposse que la fonction getElementBytagName ne retourne pas le même type d'objet que getChildren. Je me demandé alors s'il était possible de trouver l'équivalent de getChildren avec le DOM ou serait-il possible avec GetChildren() de parcours récurssivement un code HTML(ce que j'essaye de faire mais ou je bloque avec la meme erreur que précédement)?
Voila en espérant avoir été suffisament claire....
Merci pour vos réponses.

03/10/2007, 10h12
SpaceFrog

Donc quand tu parlais de tableau tu parlais bien de la balise <table>

un tableau à un tbody ...

essaye

Code:

var mesLignes=item.getElementsByTagNamle('tbody')[0].getElementsByTagName('div');
03/10/2007, 10h16
locs

Cela viendrait du fait que j'aipas mit les tbody dans mon code html alors?

que tu les mette ou non n'a pas réellement d'importance pour javascript ...
Code:

1 2 3 4 5 6 7 8 <table id='montableau'> <tr> <td>coucou</td> </tr> </table> <script type='text/javascript'> alert(document.getElementById('montableau').getElementsByTagName('tbody').length) </script>
pour le DOM il y en a un ...

03/10/2007, 10h34
locs
je viens de tester ton code :
Code:

1 2 var mesLignes=item.getElementsByTagName('tbody')[0].getElementsByTagName('div');
Mais j'ai le même probléme en fait j'arrive bien a me possitionner sur le bon élément mais lorsque je fais :
Code:

1 2 3 myHandle.addEvent('mousedown', function(e) { e = new Event(e).stop();
J'ai l'erreur "cette objet ne gére pas cette propriété ou cette méthode".
Je pense que "getElementsByTagName" ne récupére pas les objets de la même maniére que getChildren(), mais je ne comprend pas pourquoi??
Si tu as une idées?

Par contre je viens de faire un test lorsque je met les deux :
Code:

1 2 3 4 5 6 7 8 9 10 11 myHandle=item.getChildren()[0].getChildren()[0].getChildren()[1].getChildren()[1].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0].getChildren()[0]; var mesLignes=item.getElementsByTagName('tbody')[0].getElementsByTagName('div'); for(i=0;i<mesLignes.length;i++) { if(mesLignes[i].id=='HandleDrag') { myHandle=mesLignes[i]; } }
l'erreur ne se produit plus, il faudrait peut être que j'initialise ma variable "myHandle" d'une certaine maniére?
J'avoue être un peu perdu la et ne plus trop comprendre le comportement de javascript .......

03/10/2007, 10h41
SpaceFrog

fais une recherche sur ce forum avec "nodeCleaner"

getChildren récupère les noeuds enfants ... et il y a selon le browser des noeuds cachés !
Fais un test en faisant un alert du nodeName ...

je viens de recupérer le nodeCleaner dont tu me parlais.

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
 
var notWhitespace = /\S/;
 
var TEXT_NODE;
try {
   TEXT_NODE = Node.TEXT_NODE;
} catch(e) {
   TEXT_NODE = 3;
}
 
var ELEMENT_NODE;
try {
  ELEMENT_NODE = Node.ELEMENT_NODE;
} catch(e) {
   ELEMENT_NODE = 1;
}
 
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x];
    if ((childNode.nodeType == TEXT_NODE)&&(!notWhitespace.test(childNode.nodeValue))) {
      node.removeChild(node.childNodes[x]);
      x--;
    }
    if (childNode.nodeType == ELEMENT_NODE) {
      cleanWhitespace(childNode);
    }
  }
}

Je l'utilise comme suis :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$$('.drag .item').each(function(item){
		cleanWhitespace(item);
 
 
		var mesLignes=item.getElementsByTagName('tbody')[0].getElementsByTagName('div');
		for(i=0;i<mesLignes.length;i++)
		{
			if(mesLignes[i].id=='HandleDrag')
			{
				myHandle=mesLignes[i];	
			}
		}
		myHandle.addEvent('mousedown', function(e) {
			e = new Event(e).stop();
                         };
}

Mais rien a faire j'ai toujours la même ereur.... je comprend toujours pas pkoi ce getelementbytagName ne retourne un objet du bon type pourtant je suis d'etre positionné sur mon div, j'ai affiché l'id de mon objet "myHandle" et il correspond bien............

03/10/2007, 10h55
SpaceFrog

tu as tenu compte du fait que tu as des table imbriqués ?
03/10/2007, 10h58
locs

C'est a dire?
Je comprend pas la???
03/10/2007, 11h01
SpaceFrog
euh ... non rien si tu récupères le bon id c'est que tu pointe sur le bon élément :oops:

sinon essaye ça:
Code:

1 2 3 myHandle.onmousedown= function(e) { e = new Event(e).stop(); };
tu n'aurais pas un problème de propagation du ommousedown?
03/10/2007, 11h04
locs

Je viens de tester comme tu viens de me le spécifier cela fonctionne, le probléme venais d'ou ?
03/10/2007, 11h08
SpaceFrog

à priori de la méthode d'attribution du onmousedown ...
Je crois que récemment il y a eu un post là dessus ...

addEvent est un peu pernicieux ... :aie:

voilà le post en question :
http://www.developpez.net/forums/sho...light=addevent