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