FireFox et la navigation dans le Dom (firstChild, ChildNodes etc...)
La plupart du temps, IE nous embete la vie pour faire ce qu’on veut dans nos pages web, surtout au niveau CSS …
Mais me voila contraint de constater que IE est, pour une fois, plus logique que Firefox !!! regardons de quoi je parle.
<h2>
<a href="#" onclick="alert(this.parentNode.firstChild == this);">Click</a>
</h2>
On s’attend évidement à avoir true, pour une fois, je repete : POUR UNE FOIS, IE est plus logique que Firefox car IE retourne true alors que Firefox retourne false … 
Le pourquoi de tout ca ? j’en savais encore rien … bizarre car le parentNode et firstChild sont bien des fonctions du w3c
Edit :
Aurélien m’a expliqué le problème : “Ce problème du moteur GECKO est bien connu et l'explication vient de espace insécable. Effectivement, l'indentation de ton code perturbe GECKO qui comptabilise une TextNode pour le Tab d'indentation”. Pour résoudre ca il suffit de faire :
<h2><a href="#" onclick="alert(this.parentNode.firstChild == this);">Click</a></h2>
C’est bien joli, mais bon quand on a plusieurs kilomètres de code on aimerait bien pouvoir rendre lisible tout ca. Aurélien aurait pu s’arreter làmais non, voici ce qu’il m’a proposé.
var
ie = /MSIE/.test(navigator.userAgent);
var moz = !ie && navigator.product == "Gecko";
if (moz) {
HTMLElement.prototype.__defineGetter__("children", function() {
var arr = new Array(), i = 0, l = this.childNodes.length;
for ( i = 0; i < l; i++ ) {
if ( this.childNodes[ i ].nodeType == 1 ) {
arr.push( this.childNodes[ i ] );
}
}
return arr;
});
HTMLElement.prototype.__defineGetter__("firstChild", function() {
var node = this.childNodes[ 0 ];
while (node.nodeType != 1) node = node.nextSibling;
return node;
});
HTMLElement.prototype.__defineGetter__("lastChild", function() {
var node = this.childNodes[ this.childNodes.length - 1 ];
while (node.nodeType != 1) node = node.previousSibling;
return node;
});
}
Ce que le code fait ? il redéfinit les fonctions “children, firstchild, lastchild” pour Firefox, comme ca elles ont le meme comportement que sur IE. On a mis children plutot que childNodes car pour définir children il faut faire appel à childNodes, il y aurait donc eu une référence circulaire.
Pour voir d’autres redefinition de fonction, il y a ce site qui en fait un bon paquet : http://webfx.eae.net/dhtml/ieemu/
Merci Aurélien
Pour me venger, et surtout pour ne pas laisser dire à certains que IE c’est mieux que Firefox, je vous montre un des nombreux exemples où IE fait n’importe quoi (bien que dans ce cas, il fait pas n’importe quoi puisqu’il ne fait rien) …
.C .content :first-child h2{margin-top:0px;}
Je ne parle pas des selecteurs CSS +, >, :hover !important etc… que IE ne connait pas non plus
Pour conclure, je dirais que Firefox, contrairement à ce que beaucoup pretende n’est pas parfait, et que IE est loin de l’être aussi. Pour ce qui est de la gestion des CSS : Firefox est largement devant IE, alors qu’en ce qui concerne Javascript, IE semble un peu devant …