Parcours de l'arbre DOM

par **jojolapine** » 10 janv. 2007, 16:52

bon alors j'ai avancé un peu... et j'ai réussit à faire des trucs assez cool

voici un code qui marche sous firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>youyou</title>
    <script type="text/javascript" language="javascript">

        HTMLElement.prototype.__defineGetter__(
            "enfants",
            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__(
            "contenu",
            function() {
                return this.childNodes[0].nodeValue;
            }
        );
        HTMLElement.prototype.__defineGetter__(
            "parent",
            function() {
                return this.parentNode;
            }
        );
    </script>
</head>
<body>
<table>
<tr style="cursor: pointer;" onclick="if(this.enfants[1].contenu=='li 2') alert('ok'); else alert('pas ok');">
  <td>bonjour</td>
  <td>li 2</td>
  <td>ouhgogh</td>
</tr>
<tr>
  <td style="cursor: pointer;" onclick="if(this.parent.enfants[1].contenu=='li 2') alert('ok'); else alert('pas ok');">bonjour</td>
  <td>li 2</td>
  <td>ouhgogh</td>
</tr>
</table>
</body>
</html>

tout les alert affichent OK!
bon maintenant, j'ai essayer de redéfinir childNodes pour ie, mais sans succès, en fait j'ai essayer dans l'esprit qqch comme ça:

if(ie){
  HTMLElement.prototype.__defineGetter__(
            "enfants",
           childNodes
        );

pour simplement changer le nom du prototype, mais ça ne fonctionne pas...

comment faire pour simplement changer le nom du prototype ?

par **jojolapine** » 10 janv. 2007, 16:03

bon ça y est je me suis dépatouiller, et ceci:

<table>
<tr style="cursor: pointer;" onclick="if(this.childNodes[3].childNodes[0].nodeValue=='li 2') alert('ok'); else alert('pas ok');">
  <td>bonjour</td>
  <td>li 2</td>
  <td>ouhgogh</td>
</tr>
<tr>
  <td style="cursor: pointer;" onclick="alert(this.parentNode);if(this.parentNode.childNodes[3].childNodes[0].nodeValue=='li 2') alert('ok'); else alert('pas ok');">bonjour</td>
  <td>li 2</td>
  <td>ouhgogh</td>
</tr>
</table>

fonctionne!!

maintenant, concernant mon envie de redéfinir un peu le bouzinpour gérer les différences entre (principalement) ie et firefox...
est-ce que ce genre de chose:

 HTMLElement.prototype.__defineGetter__("enfants", 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;
      });

abouti à ce genre d'appel dans le code:

this.enfants[0]....

par **Ryle** » 10 janv. 2007, 15:39

Tout pareil que mojorisin

Pour tes fonctions, tu peux les définir comme tu l'as fait, mais tu ne peux pas les appeller comme tu l'as fait, tu ne parcours pas le dom, tu fais appel à une fonction

Rien ne t'empêche ensuite par contre de reconstruire dans ta fonction la chaine du dom qui va bien pour accéder à l'élément que tu passerais en paramètre

par **mojorisin** » 10 janv. 2007, 14:21

Salut,
parentNode n'est pas un tableau, de par sa structure un élément xhtml ne peut avoir qu'un parent.

Code : Tout sélectionner

var objParent = this.parentNode; // récupération du noeud parent

Exemple pour remonter dans l'arborescence

Code : Tout sélectionner

var theObj = document.getElementById('monId');
for(i = theObj; i != null;i= i.parentNode){
     if(i.nodeName == 'LI'){
          alert('je suis un element de liste');
     }
}

par **jojolapine** » 10 janv. 2007, 12:55

je me demandais aussi une chose...
si je souhaite redéfinir les fonctions de parcours, pour gérer les différences firefox ie...
pour avoir ce genre de syntaxe:

<div onclick="if(this.enfant[0].contenu=='lilalou') alert('ok');">
  <h1>lilalou</h1>
  <p onclick="if(this.parent.enfant[1].contenu=='blabla') alert('ok');">blabla</p>
</div>

comment dois-je définir mes fonctions... comme ceci:?

function enfant(...){
...
return array;
}
function contenu(...){
...
return value;
}
etc...

par **jojolapine** » 10 janv. 2007, 12:14

oui je me suis rendu compte de mes erreurs, alors voici quelquechose qui fonctionne, par contre le coup du parent node ne fonctionne pas...

<table>
<tr style="cursor: pointer;" onclick="if(this.childNodes[3].childNodes[0].nodeValue=='li 2') alert('ok'); else alert('pas ok');">
  <td>bonjour</td>
  <td>li 2</td>
  <td>ouhgogh</td>
</tr>
<tr>
  <td style="cursor: pointer;" onclick="alert(this.parentNodes[0]);if(this.parentNodes[0].childNodes[3].childNodes[0].nodeValue=='li 2') alert('ok'); else alert('pas ok');">bonjour</td>
  <td>li 2</td>
  <td>ouhgogh</td>
</tr>
</table>

qu'est-ce qui pèche dan sle deuxième tr...

?

par **Ryle** » 10 janv. 2007, 11:52

C'est tout marqué dans le lien que t'a donné Xenon

:

To reference the parent node, we use node.parentNode

Quant à ton code, il manque un "d" à childNode et this.childNodes[1] te retournera l'objet "<li>" et non pas le contenu html de celui-ci... Il n'affichera donc pas l'alert, mais tu as déjà du t'en rendre compte en essayant de le jouer

par **jojolapine** » 10 janv. 2007, 10:09

bonjour,
merci pour vos réponses, donc je suis aller voir les deux liens donné, on va voir si jai compris à peu près la chose...
encore un exemple:

<ul onclick="if(this.chilNodes[1]=='li 2') alert('ok');">
  <li>bonjour</li>
  <li>li 2</li>
  <li>ouhgogh</li>
</ul>

normalement ce code m'affiche l'alert... oui ?
bon si oui alors j'ai compris le childNodes.
voilà maintenant le soucis, comment faire pour que lorsque je suis sur le li je puisse "remonter" d'un niveau, sans avoir à utiliser getElementById, est-ce que la fonction parentNodes existe ?

par **Xenon_54** » 10 janv. 2007, 03:45

Si tu lis l'anglais, j'ai bien aimé ce tuto simple:
http://www.howtocreate.co.uk/tutorials/ ... /dombasics

par **Truc** » 10 janv. 2007, 01:59

C'est pas tout à fait la même chose...

Dans l'exemple donné il s'agit d'un formulaire la il faudrait regarder du coté de childNodes

par **jojolapine** » 10 janv. 2007, 01:38

Bonsoir à tous,
suite à ce message: http://www.phpfrance.com/forums/voir_re ... php#171250
je me suis demandé comment parcourir l'arbre du document, et je suis tombé ensuite sur ce message: http://www.phpfrance.com/forums/voir_re ... php#171473
donc en gros ma question est comment peut on atteindre les éléments parents , enfants ? d'un élément donné
prenons un exemple:

<ul>
<li onclick="leparent.elements[1].innerHTML='youpi';">oihdazd</li>
<li>oihfezoih</li>
</ul>

voilà dans cet exemple, comment à partir du li remonter au ul pour redescendre ensuite au seconde fils de ce dernier... ou alors peut-on passer directement au li suivant...

Parcours de l'arbre DOM

Répondre

Étendre la vue Revue du sujet : Parcours de l'arbre DOM

Parcours de l'arbre DOM