node.nextSibling.style ne marche pas

Version imprimable

Salut,
J'ai cette structure :

Code:

1
2
3
4
5
 
<select name="corps" id="corps">
<option value="-1">Chargement...</option>
</select>
<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>

Et coté JS :

Code:

1
2
3
4
 
 else if (xhr.readyState < 4) {
	document.getElementById('corps').nextSibling.style.display = "inline";
 }

Mais plutot ceci marche :

Code:

1
2
3
4
 
 else if (xhr.readyState < 4) {
	document.getElementById('loader').style.display = "inline";
 }

Où est le soucis?

Merci d'avance...:cry:

04/10/2010, 20h39
Bovino

Comme précisé dans la FAQ (Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?), nextSibling ne correspond pas nécessairement à la balise suivante ;)
04/10/2010, 22h06
okoweb

Citation:

Envoyé par Bovino

Comme précisé dans la FAQ (Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?), nextSibling ne correspond pas nécessairement à la balise suivante ;)

ce code ne fo,fonctionne ni sur Firefox, ni sur IE. Je ne pense pas que ce soit le problème.

Merci d'avance...8O

Code:

1
2
3
4
else if (xhr.readyState < 4) {
    var loader = document.getElementById('corps').nextSibling;
    loader.style.display = "inline";
 }

05/10/2010, 14h04
Watilin
C'est les nœuds #text qui posent problème. Dès qu'il y a un saut de ligne dans le code HTML, ça fait un nœud #text.
Code:

1 2 3 while(node.nextSibling && node.nextSibling.nodeType != 1) { node = node.nextSibling; }
Le nodeType no. 1 correspond aux éléments HTML (pour #text c'est 3).

http://www.w3.org/TR/DOM-Level-2-Cor...#ID-1950641247

;)

Code:

1
2
3
4
5
6
7
 
else if (xhr.readyState < 4){
   var node = document.getElementById('corps');
   var parent = node.parentNode;
   var loader = parent.getElementsByTagName('span')[0];
   loader.style.display = "inline";
}

Ceci plutôt marche.

05/10/2010, 14h28
SpaceFrog

sinon deux mots magiques:
"node Cleaner"
05/10/2010, 14h51
okoweb

Citation:

Envoyé par SpaceFrog

sinon deux mots magiques:
"node Cleaner"

Comment utiliser ce truc et quel peut être son utilité?:ccool:

Merci d'avance...
05/10/2010, 14h55
SpaceFrog

suffit de passer le code de la page au nodeCleaner qui supprimeras les noeuds 'inutiles' et mettra ainsi tous les navigateurs d'accords sur le nextSibling
05/10/2010, 15h08
okoweb

Citation:

Envoyé par SpaceFrog

suffit de passer le code de la page au nodeCleaner qui supprimeras les noeuds 'inutiles' et mettra ainsi tous les navigateurs d'accords sur le nextSibling

DIEU EST GRAND !

Où trouver cette fonction magique?:ccool:

Merci d'avance...
05/10/2010, 15h26
SpaceFrog

ben sur developpez ... forcément

http://www.developpez.net/forums/d47...leaner-retour/

Citation:

Envoyé par SpaceFrog

ben sur developpez ... forcément

http://www.developpez.net/forums/d47...leaner-retour/

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var q, bal, p;
 
function clean(d){
	bal=d.getElementsByTagName('*');
	for(j=0;j<bal.length;j++){
		if(!q){
			q=true
		}
		else{
			q=false;
			j++;
		}
 
		p=bal[j].parentNode.childNodes;
		for(i=0;i<p.length;i++){
			if(p[i].data && !p[i].data.replace(/\s/g,'')){
				p[i].parentNode.removeChild(p[i])
			};
		}
	}
}
 
function isExpand(ObjId){
var node = document.getElementById(ObjId);
 
//Nettoyage des noeuds Text
var node = clean(node);
 
var fils = node.childNodes;
alert(fils.length);
for(var a=0;a<fils.length;a++){
 alert(fils[a]);}
}
</script>
<style>
</style>
</head>
<body>
<div id="prj" onclick="isExpand(this.id);"><img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/folder.gif" align="top">project<br>
	<div id="sim" style="position:relative;left:15px">
	<img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/folder.gif" align="top"/>simul<br>
	</div>
	<div id="cpc" style="position:relative;left:30px">
	<img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/CPC.gif" align="top"/>cpc<br>
	</div>
	<div id="lp1" style="position:relative;left:45px">
	<img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/base.gif" align="top"/>lpar<br>
	</div>
</div>
</body>
</html>

Après un tour sur le lien je teste ceci et ca ne marche pas, or au moins avant le nettoyage le code marchait meme childnodes était différent entre FX et IE. Le problème est ici :

Code:

1
2
3
 
//Nettoyage des noeuds Text
var node = clean(node);

05/10/2010, 22h20
SpaceFrog

non, lance juste :

Code:

clean(document.body)

ensuite ton code sera propore pour une utilisation de nextSibling
06/10/2010, 18h31
Watilin

Mouais, je suis pas convaincu par cette technique… On se sert jamais de tous les nœuds du document, ça fait du travail en trop. Et au chargement de la page, c’est pas forcément top.

Je prefère une solution du type nextElementSibling ( https://developer.mozilla.org/En/DOM...ElementSibling ) dont je me fais ma propre implémentation quand je travaille sans framework.

;)

Citation:

Envoyé par Watilin

Mouais, je suis pas convaincu par cette technique…
Je prefère une solution du type nextElementSibling ( https://developer.mozilla.org/En/DOM...ElementSibling ) dont je me fais ma propre implémentation quand je travaille sans framework.
;)

Je suis d'accord avec vous mais ce truc ne marche qu'avec Firefox.
Mais en faisant ceci ca ne marche pas.
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div> <script type="text/javascript"> var dom = function(methode){ var el = document.getElementById('div-01').methode; while (el) { document.write('<li>' + el.nodeName + '</li>'); el = el.methode; } document.write('</ol>'); } window.onload = function() { document.write('<p>Siblings of div-01</p><ol>'); if (navigator.appName == 'Microsoft Internet Explorer'){ // pour IE dom(nextSibling); }else{ // pour FF et autres navigateurs dom(nextElementSibling); } } </script> </body> </html>
Merci pour votre aide...

09/10/2010, 13h56
Bovino

Utiliser document.write() après le onload (donc quand le document passe à l'état closed) revient à vider la page et la recréer, il n'y a donc plus de noeuds à ce moment là.

De toute façon, write() est une méthode à éviter autant que possible !
09/10/2010, 16h01
SpaceFrog

dès que tu fais un write tu laisses le navigateur recréer ses noeuds inutiles
il faut repasser un coup de cleaner après
10/10/2010, 07h44
dukej

Citation:

Envoyé par SpaceFrog

dès que tu fais un write tu laisses le navigateur recréer ses noeuds inutiles
il faut repasser un coup de cleaner après

non le navigateur ne créé pas de noeuds inutiles, ces noeuds sont inutiles pour toi mais ils ne le sont pas pour le dom. car un TextNode peut contenir du texte utile.

De plus ce que tu fais au chargement demande beaucoup de traitement pour des GROSSES pages
10/10/2010, 10h16
SpaceFrog

pour moi un textNode vide n'est pas utile ...
après à chacun ses habitudes de programmation.
Je prefère nettoyer le code plutot que de verifier les noeuds à chaque fois.
Celà ne m'a jamais posé de problème.
Mais depuis que j'utilise plus regulièrement JQuery j'avoue que la gestion des childNodes et nextSibling ne me pose plus aucun souci
12/10/2010, 12h13
okoweb

Merci à vous tous, pour vos conseils.