Parcours de l'arbre DOM

ViPHP
ViPHP | 3607 Messages

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...

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

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

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Mammouth du PHP | 1885 Messages

10 janv. 2007, 03:45

Si tu lis l'anglais, j'ai bien aimé ce tuto simple:
http://www.howtocreate.co.uk/tutorials/ ... /dombasics
La programmation est l'expression de la poésie d'un programmeur
Génération PHP

ViPHP
ViPHP | 3607 Messages

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 ?

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

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 ;)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

ViPHP
ViPHP | 3607 Messages

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... :? ?

ViPHP
ViPHP | 3607 Messages

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...

Eléphant du PHP | 217 Messages

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'); } }

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

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 :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

ViPHP
ViPHP | 3607 Messages

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!! :D
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]....

ViPHP
ViPHP | 3607 Messages

10 janv. 2007, 16:52

bon alors j'ai avancé un peu... et j'ai réussit à faire des trucs assez cool :P
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 ?