Les méthodes relationnelles

A l'inverse des méthodes vues jusqu'à présents qui traversent l'entiereté du document, Il existe des méthodes qui permettent d'accéder et donc de s'informer sur l'environnement immédiat d'un noeud.

parentNode

Chaque node d'un document xhtml possède un node parent à l'exception de document. Pour accéder au node père d'un node sépcifique, le DOM spécifie la propriété parentNode qui permet l'accès direct au père supérieur d'un node. Exemple :

parent = node.parentNode;

childNodes

childNodes est la collection de toutes les node qui partage le même parentNode. Si le node choisit ne possède pas d'enfant il renvoie undefined. Exemple :

nodeChildList = node.childNodes;

Une traduction écrite de l'exemple ci-dessus serait : Parcourir l'entiereté des enfants de node et assigner à nodeChildList la collection des node rencontrées.

Nous obtenons une liste des node enfants du node spécifié uniquement à la différence de getElementsByTagName. l'accession à cette liste se fait de la même manière qu'avec getElementsByTagName, exemple :

node.childNodes.length // donne le nbre d'elements enfants
                       pour le noeud node
child = node.childNodes.item(3)  ou
child = node.childNodes[3] // assigne à child les méthodes 
                              et propriétés du 4ème enfant de node.

hasChildNode()

une manière simple pour savoir si un node possède ou non des enfants et d'utiliser la méthode hasChildNode(). cette méthode renvoie true si le noeud sélectionné possède des enfants sinon elle renvoie false.

node.hasChildNode(); //renvoie true ou false

firstChild et lastChild

Afin de restreindre l'utilisation de childNode au cas les plus importants lorsque l'on désire accéder au premier et/ou au dernier enfant d'un node spécifique, le DOM spécifie la propriété firstChild qui permet l'accession directe au premier enfant d'un noeud spécifique et la propriété lastChild qui permet l'accession directe au dernier enfant d'un noeud spécifique. Exemple :

first = node.firstChild;
last = node.lastChild;

nextSibling et previousSibling

A l'exception de document un node peut avoir un node frère c'est-à-dire qu'ils partagent le même parentNode. Une manière d'obtenir tous les node frères est d'utiliser childNodes, mais si vous n'êtes intéressé que par les node adjacents au node spécifié, le DOM spécifie 2 propriétés complémentaires pour les atteindre. nextSibling qui permet d'atteindre le node suivant le node spécifié et previousSibling qui permet d'atteindre le node précédent le node spécifié.

next = node.nextSibling;
prev = node.previousSibling;

Quelques remarques

Les propriétés parentNode, nextSibling, previousSibling faisant référence à un parent ou à un frère d'un node ne peuvent être utiliser sur document car document est le node racine de votre document.

Exemples

Différence entre childNode et getElementsByTagName

Afin de bien illustrer la différence fondamentale entre childNodes et getElementsByTagName, essayons de déterminer le nombre de <p> dans notre document en utilisant getElementsByTagName et childNodes.

function getChildElementsByTagNameOcc(node,tag){
  var tagOccurence = 0;
  for (var i = 0; i < node.childNodes.length; i++){
    if(node.childNodes[i].nodeName == tag){
      tagOccurence++;
    }  
  }
  return tagOccurence;
}

Voici la partie la plus importante du script. la fonction getChildElementsByTagNameOcc récupère la liste des noeuds-enfants d'un node quelconque et en indiquant une balise spécifique à l'aide de la variable tag on détermine le nombre d'occurence de celui-ci parmi les noeuds-enfants de node.

Compléter le premier script du tutorial

Comme promis voici le premier script example1() complet car maintenant que l'on sait accéder aux node enfants de <a>, on peut accéder au node #text du cette balise.

Récapitulatif

Ce dernier script utilise toutes les techniques vues jusqu'à présent et vous permet d'obtenir déjà un nombre impressionnant d'informations sur :

1. la balise <div id="page">
2. la balise <h1 id="titre">
3. la balise <div id="navigation">
4. la balise <div id="content">
5. la balise <div id="footer">