getElementById sous IE -> impossible d'accéder à l'objet HTML

Version imprimable

Bonjour,

Je ne sais pas si le titre est très clair mais je vais essayer d'expliquer mon problème.

J'ai un problème dans un script complexe qui m'a fait descendre à l'origine (enfin j'espère) de ce problème.

Lorsque je souhaite récupérer un objet HTML (dom ?) dans IE8, je n'arrive pas à avoir le type de l'objet.

Je vais mettre du code, ce sera plus simple.

Voici ma page.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test</title> </head> <body id="conteneur"> <table> <tbody> <tr> <td><input type="text" id="toto"></td> </tr> </tbody> </table> </body> </html> <script language="javascript">alert(document.getElementById('toto'));</script>
Sous Firefox, je récupère [object HTMLInputElement]
Sous IE8, je récupère [object].

Qu'est-ce qui est incorrecte dans mon code ? Dans la configuration d'apache ?
Quelqu'un aurait une idée ?

Merci !

JanO

18/09/2009, 11h29
E.Bzz

Bonjour et bienvenue sur Developpez.com :ccool:

As-tu essayé

Code:

alert(document.getElementById('toto').type);

EDIT : ou plutôt visiblement

Code:

alert(document.getElementById('toto').tagName);

A+

Alors je récupère bien 'text'.

J'ai essayer une petite méthode :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript">
function var_dump(obj) {
   if(typeof obj == "object") {
      return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
   } else {
      return "Type: "+typeof(obj)+"\nValue: "+obj;
   }
}//end function var_dump
 
 
alert(var_dump(document.getElementById('toto')));</script>

Je n'arrive pas à récupérer le constructor et le type est "pauvre". Il n'indique que [object].

18/09/2009, 11h49
E.Bzz

Mais tu veux récupérer quoi, au juste ?
Mes 2 exemples renvoient :
.type => "text"
.tagName => "INPUT"

A+
18/09/2009, 11h54
Bovino

Citation:

Envoyé par janoyolo

Sous Firefox, je récupère [object HTMLInputElement]
Sous IE8, je récupère [object].

C'est la même chose exprimée différemment :?
Les deux correspondent au même objet HTML.
Donc :

Citation:

Mais tu veux récupérer quoi, au juste ?
18/09/2009, 11h56
janoyolo

A vrai dire, je veux récupérer l'objet en entier.

J'ai simplifié le code car je pense que le problème vient de cette gestion de l'objet par IE mais derrière, ce document.getElementById() permet l'affichage d'un calendrier...

Si ie renvoie uniquement une partie des éléments de l'objet, ce n'est pas suffisant.
18/09/2009, 11h57
Bovino

Citation:

Envoyé par janoyolo

Si ie renvoie uniquement une partie des éléments de l'objet, ce n'est pas suffisant.

8O
Quelle est la partie que IE ne renvoie pas ???
18/09/2009, 11h58
E.Bzz

Citation:

Envoyé par janoyolo

A vrai dire, je veux récupérer l'objet en entier.

L'objet lui-même est

Code:

document.getElementById('toto')

C'est d'ailleurs bien lui que tu passes à ta fonction :koi:
Tu peux ensuite en récupérer tous les attributs ...

A+
18/09/2009, 12h03
janoyolo

Ce qui m'étonne, c'est le comportement d'IE.

Je crée mon fichier mapage.html avec le contenu indiqué plus haut.

Si je l'ouvre directement dans un dossier (windows) en faisant clic droit -> ouvrir avec internet explorer, l'alert me renvoie le même message sous IE que sous firefox.

Par contre, en mettant cette page sur un serveur, je ne récupère que [object] et apparemment, c'est objet n'est pas considéré comme un contenu HTML.

Je sais bien que l'objet que j'envoie est document.getElementById('toto') mais apparemment, je ne peux pas récupérer tous les attributs.
18/09/2009, 12h07
E.Bzz

Citation:

Envoyé par janoyolo

mais apparemment, je ne peux pas récupérer tous les attributs.

C'est à dire : lesquels manquent ?

On va finir par savoir :mouarf:

A+
18/09/2009, 12h16
janoyolo

Lesquels manquent ?

Alors, j'aimerais bien le savoir ;)

mais par exemple :

Code:

alert(document.getElementById('toto').constructor);

renvoie dans le cas présent "undefined" alors qu'il renvoie [object HTMLInputElement] sous firefox ou alors si j'exécute la page en faisant -> ouvrir avec IE.

Je ne peux donc pas vous dire quel élément manque, j'ai juste repéré que le comportement n'était pas le même en ligne avec IE comparé a firefox ou IE en local (entendez en local, non exécuté derrière un serveur web).

Ce que je voulais savoir c'est si ce comportement était connu mais je vais devoir aller fouiller un peu plus profondément dans le code pour savoir quelle est l'élément qui n'est pas récupéré.

Si vous avez des idées, je suis toujours preneur.

Merci pour vos réponses. Je laisse le sujet ouvert bien entendu.
18/09/2009, 14h21
Bovino

constructor fait référence aux objets natifs de JavaScript et effectivement, Firefox implémente des objets HTMLElement, mais ce n'est absolument pas cross browser et cela ne sert que si tu souhaites ajouter des prototypes à tes objets. Pour le reste, les propriétés sont identiques (ou presque) entre IE et Firefox.

Exactement, il y a des prototypes dans mes objets (enfin, ce ne sont pas les miens, je ne suis pas assez calé pour ça).

Il s'agit de dhtmlxCalendar et apparemment, en fouillant un peu plus, j'ai identifié là où ça me pose problème.

Deux cas de test :

- cas 1 : IE 8 derrière un serveur web

- cas 2 : IE 8 exécuté en faisant un clic droit sur ma page html et en faisant "ouvrir avec" -> IE 8 ou en utilisant firefox.

J'ai encore une fois extrait la partie de code qui me pose problème.

Ici, je veux récupérer la position absolue en PX de l'objet.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> </head> <body style="position:relative; width:1000px; margin:0 auto;"> <table> <tbody> <tr> <td valign="top"><input type="text" id="toto"></td> </tr> </tbody> </table> </body> </html> <script language="javascript"> function getAbsoluteLeft(htmlObject){ var xPos = htmlObject.offsetLeft; var temp = htmlObject.offsetParent; while (temp != null){ xPos+=temp.offsetLeft; temp=temp.offsetParent; } return xPos; } alert(getAbsoluteLeft(document.getElementById('toto'))); </script>
Si vous l'exécutez pour le cas 1 et pour le cas 2, vous ne récupérez pas le même résultat.
Il semblerait que l'offsetParent du BODY soit le problème.

Le style se trouvant dans le body est voulu, la page doit-être centrée.

Vous avez une idée de ce comportement différent entre le cas 1 et le cas 2 ?

Merci encore pour vos messages.

18/09/2009, 15h22
janoyolo

Bon, je n'apporte pas de solution mais je vais clore le sujet car j'ai contourné le problème.

Je soustrais à mon xPos retourné, la valeur de

Code:

document.body.offestLeft

.

Je pourrais faire en sorte de faire un break dans ma boucle mais étant donné que c'est une méthode générique, je préfère remonter au plus proche de mon code, les modifications.

Merci encore pour votre aide,

cordialement,