node.nextSibling.style ne marche pas

**okoweb** · 04/10/2010, 20h17

Salut,
J'ai cette structure :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Mais plutot ceci marche :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

O� est le soucis?

Merci d'avance...

**Bovino** · 04/10/2010, 20h39

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

**okoweb** · 04/10/2010, 22h06

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

**Bovino** · 05/10/2010, 07h58

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**Watilin** · 05/10/2010, 14h04

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

**okoweb** · 05/10/2010, 14h24

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**SpaceFrog** · 05/10/2010, 14h28

sinon deux mots magiques:
"node Cleaner"

**okoweb** · 05/10/2010, 14h51

Envoy� par SpaceFrog

sinon deux mots magiques:
"node Cleaner"

Comment utiliser ce truc et quel peut �tre son utilit�?

Merci d'avance...

**SpaceFrog** · 05/10/2010, 14h55

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

**okoweb** · 05/10/2010, 15h08

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?

Merci d'avance...

**SpaceFrog** · 05/10/2010, 15h26

ben sur developpez ... forc�ment

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

**okoweb** · 05/10/2010, 15h50

Envoy� par SpaceFrog

ben sur developpez ... forc�ment

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

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

**SpaceFrog** · 05/10/2010, 22h20

non, lance juste :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

clean(document.body)

ensuite ton code sera propore pour une utilisation de nextSibling

**Watilin** · 06/10/2010, 18h31

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.

**okoweb** · 09/10/2010, 11h31

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 :

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

**Bovino** · 09/10/2010, 13h56

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 !

**SpaceFrog** · 09/10/2010, 16h01

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

**dukej** · 10/10/2010, 07h44

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

**SpaceFrog** · 10/10/2010, 10h16

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

**okoweb** · 12/10/2010, 12h13

Merci � vous tous, pour vos conseils.

node.nextSibling.style ne marche pas

JavaScript

Discussions similaires

Partager

Partager