Traversée aléatoire des éléments

Les nouvelle spécifications web (HTML 5 , DOM 3, CSS 3) sont de plus en plus implémentées dans les navigateurs web, à des degrés divers certes mais de manière suffisante pour pouvoir déjà être utilisées dans nos documents. Sauf qu'il faut encore et toujours faire attention : Le « browser implementation sniffing » n'est pas mort.

Prenons le cas de l'interface de traversée de l'arborescence d'un élément DOM, spécification annexe du DOM 3 et source d'un bug dont j'ai mis un petit moment à me défaire. Il s'agit d'une API permettant de récupérer la liste des éléments enfant d'un élément en laissant de côté les noeuds texte. Voyons les informations qu'elle nous fournit sur un document HTML 5 simple.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <header></header>
        <div></div>
        <footer></footer>
    </body>
</html>
Document HTML 5 de base.

Cherchons d'abord à connaître le nombre d'éléments portés par l'élément racine :

var n = document.documentElement.children.length;
Nombre d'éléments enfant de la racine du document.

Nous nous attendons à ce que n = 2 puisque html possède deux éléments enfants (head et body). Sauf que Firefox retournera 3 lorsque le panneau de Firebug est ouvert !

Voyons ensuite le nombre d'éléments enfant de body :

var nBody = document.body.children.length;
Nombre d'éléments enfant du body.

Nous devrions avoir nBody = 3 puisque body possède 3 éléments enfant (header, div et footer). Sauf que, là encore, ce n'est pas aussi simple : Opera, qui supporte l'API de traversée des éléments, ne reconnaît apparemment pas les éléments HTML 5 (header et footer dans notre cas) comme de « véritables enfants » ; nBody vaudra donc 1 !

Bref, si on intègre cette interface dans nos développements à travers un lazy pattern par exemple, la simple détection de la propriété ne sera pas suffisante. Ca à l'air évident mais cela va mieux en le disant.

NIBAU, Rui. Récupérer les enfants d'un noeud DOM. Omacronides,