ParentNode : IE et les autres

Internet Explorer ne cessera jamais de m'étonner. Alors qu'on croit avoir fait plus ou moins le tour de toutes les tracasseries les plus évidentes et les plus courantes, que ce soit en css, en javascript ou en html, v'la ti pas qu'on peut encore tomber de sa chaise en déboguant du javascript au boulot. Ou pourquoi un élément fraîchement créé possède un noeud parent alors qu'il n'a encore été inséré nulle part.

Prenons un exemple simple : la création d'un paragraphe contenant du texte.

var p = document.createElement("p");
p.appendChild(document.createTextNode("Lorem ipsum."));
Création d'un élément paragraphe contenant un texte.

On peut connaître le noeud parent de cet élément grâce à sa propriété parentNode. Que devrions-nous avoir ici ? L'élément n'ayant pas été inséré dans l'arborescence du document, il n'a pas de parent, donc p.parentNode devrait renvoyer null, ce qu'indiquent d'ailleurs les spécifications W3C :

[element.parentNode] The parent of this node. All nodes, except Attr, Document, DocumentFragment, Entity, and Notation may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.

DOM Level 2 Core Specification

Voici donc la question à 1000 roupies : lequel, parmi les 4 navigateurs suivants, Firefox, Safari, Opera et Internet Explorer, vous renvoie autre chose que null quand vous faites un p.parentNode ?

Pour IE, p appartient à un fragment de document, apparu comme par magie : p.parentNode renverra donc un élément DocumentFragment en lieu et place du null attendu. Pour être plus précis : si vous créez un élément sans lui injecter d'enfants, parentNode sera bien nulle ; par contre, dés que l'arborescence de l'élément est manipulée (dans notre exemple, l'ajout du noeud texte « lorem ipsum »), patatra, c'est le drame.

Bref, si vous comptez sur la valeur de la propriété parentNode pour savoir si un élément à été inséré dans l'arborescence du document, IE pourrait vous induire en erreur ; vérifier donc si le noeud parent n'est pas un fragment de document.

LE HORS, Arnaud ; LE HÉGARET, Philippe ; WOOD, Lauren, et al.. Document Object Model (DOM) Level 2 Core Specification. W3C, . Interface Node