Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 novembre 2009 1 16 /11 /novembre /2009 03:00

On a parfois besoin de  se promener  dans le document en partant d'un élément déjà trouvé : remonter à son parent, parcourir la série de ses descendants, passer à son voisin… Cela demande des idées claires sur l'arborescence du document.

Exemple

Prenons un exemple simple et tout de même réaliste :

 <ul title="une liste"> <!-- Une liste non numérotée --> <li>Premier item</li> <li>Deuxième <em>ou second</em> item</li> </ul> 

Dit en français (à peu près) normal :  un ul contenant deux li. Le premier li ne contient que du texte, le second contient aussi un em. Une ligne de commentaire, mais les commentaires ne comptent pas, comme chacun sait.  Tout faux, revue de détail.

En regardant le premier li on conclura peut-être qu'il n'a pas de descendant. Vrai et faux, donc faux : certes il ne contient aucun autre élément de document (il n'y pas de balise) mais il contient du texte, et ce texte est un descendant, un autre nœud. C'est même un descendant ultime, un  nœud terminal  : un texte n'a pas de descendant.

Pour le deuxième li on pourrait dire :  du texte, et dans ce texte un em . Ca ne colle pas avec l'idée qu'un texte n'a pas de descendant. La bonne vision des choses est :

  1. un premier nœud texte :  Deuxième   (espace compris),
  2. un élément em (contenant lui-même un nœud texte) : deuxième enfant du li,
  3. enfin le deuxième nœud texte   item  (espace compris) qui est le troisième et dernier enfant du li.

Enfin, si on pense que le  nœud  ul a deux  enfants , à savoir chacun des li, on a tort. En effet :

  1. le commentaire HTML est un enfant de l'ul : 3 enfants ;
  2. plus vicieux : les retours à la ligne du code source, purement décoratifs, sont aussi des nœuds de texte ! Ce qui fait quatre nœuds supplémentaires ;
  3. encore plus vicieux : certains navigateurs comptent ces nœuds, d'autres les négligent.

L'élément ul a donc, en définitive, trois ou sept enfants selon les navigateurs… alors que deux seulement nous intéressent vraiment.

Moralité

Il ne faut pas se décourager mais seulement :

  1. ne jamais compter a priori sur le nombre d'enfants d'un élément donné,
  2. ne jamais tenir pour acquis que tel élément occupera tel rang dans la liste childNodes de son parent,
  3. quand on passe ces enfants en revue, toujours vérifier qu'ils sont bien ce qu'on croit : test sur la classe r.className, sur le type de nœud r.nodeType (1 pour un  vrai  élément, 3 pour du texte, 2 pour un attribut) ou sur sa balise r.tagName (attention : en minuscules ou majuscules selon les circonstances),
  4. préférer getElementsByTagName ou getElementById quand c'est possible.

Pour mémoire : d'autres liens JavaScript

par Aïe mes doigts ! - dans JavaScript Mania
commenter cet article

commentaires

Archives