Ajouter une propriété à un élément HTML

Bonjour,
Dans ma page, j'ai besoin de lier à un élément HTML un objet javascript. Pour cela, j'ai pensé lui ajouter ce dernier en tant que propriété, en faisant dans mon script: monElementHTML.nouvelObjet = monObjet
Ca fonctionne correctement sur tous les navigateurs (Firefox, Safari, Opera, Chrome) mais pas sur Internet Explorer, qui, au lieu d'ajouter mon objet en tant que propriété de l'élément HTML, l'ajoute en tant qu'attribut HTML, donc sous forme de chaîne (avec appel de toString())!
Auriez-vous une idée de la manière de procéder pour obtenir le bon résultat sur Internet Explorer ? Sinon toute autre solution serait la bienvenue pour pouvoir retrouver un objet javascript quelconque à partir d'un élément HTML.
Merci


Un exemple d'utilisation pratique de ce procédé:
<p onclick="this.monObjet.reponseAuClic()"> ... </p>

Bonjour,

lié un objet javascript à une balise ? une fonction non ( même si c'est en POO ) ?

>>monElementHTML.nouvelObjet = monObjet
certes... mais tu fais tel quel ?

c'est quoi monElementHTML ? c'est quoi nouvelObjet ? c'est quoi monObjet ?

en général, on ajoute du javascript sur un évênement lié à une balise (**) ,
    sinon, le javascript ne sert à rien ! mais je comprend sûrement mal,
    je ne vois pas trop ce que tu veut faire, ni comment tu le fais,
    et... tu es sûr que FF et les autres ne râlent pas dans leur "console d'erreur" ?

(**) exemple :
    <balise...>
    <script...> balise.onévênement=function() { traitements; }</script>

Cordialement [mon Site] [M'écrire] Bul

tant qu'à faire :

Navigateurs	Quelques Explications
Chrome	contrôler page actuelle / Options pour développeurs / Console Javascript
FireFox	Outils / Console d'erreurs et mieux : télécharger FireBug
Internet Explorer	activer le deboggage : Outils/options Internet/Avancés dans la liste, sous "Navigation" : décocher o Afficher une notification de chaque erreur de script o Désactiver le débogage de Scripts (Internet Explorer) et mieux (pour IE < 8) : télécharger le Debogger IE voir aussi : DebugBar et Companion JS
K-Meleon	Outils / Console d'erreurs
Opera	Outils / Avancé / Console d'erreurs
Safari	Debug / Show JavaScript Console ° modifier Fichier com.apple.Safari.plist situé dans le répertoire : Support:\Documents and Settings\utilisateur \Application Data\Apple Computer\Safari\Preferences\ y ajouter <key>IncludeDebugMenu</key> <true/>

Bonjour,

Merci de m'avoir répondu, Bul3. Ton tableau m'a servi car je ne connaissais pas tout. J'ai donc pu vérifier à nouveau sous Opera 9.51, Safari 4 beta pour Windows, Chrome 1.0.154, IE7, IE8, et Firefox 3.0.9. A part IE7 et IE8, tous réagissent comme je le souhaite: leur console n'affiche pas de message d'erreur, et ceux qui disposent d'outils d'inspection des propriétés DOM des éléments HTML (Firefox avec Firebug, Opera, Safari) montrent bien mon objet javascript rattaché à l'élément HTML en tant que propriété DOM.

Pour que les choses soient plus claires, je vais expliquer un peu le contexte dans lequel j'utilise ce système:

Dans une page, j'ai un tableau (balise <table>) avec lequel l'utilisateur peut interagir: une interface avec des boutons permet de lui ajouter à volonté des lignes et des colonnes. De même, lorsqu'on clique quelque part dans le tableau, celui-ci réagit (mise en surbrillance, affichage de menus, de zones cachées, etc). Comme le tableau est de taille variable et se construit dynamiquement, j'ai décidé de le représenter de façon abstraite par une classe javascript Tableau, elle-même comprenant des classes internes: Ligne et Cellule. A chaque fois qu'une nouvelle ligne est créée, une instance de Ligne est créée et rattaché à mon instance de Tableau (Tableau contient un champ Array contenant des objets Ligne, et chaque objet Ligne contient un champ Array avec des objets Cellule).

Voici un aperçu simplifié de ce que cela donne:

function Tableau() {
   
        this.lignes = new Array();           // tableau de lignes (objets Ligne)
        this.baliseTable = $('maTable');/**/ // Elément html <table>
        this. ligneSelectionnee = null;       // Ligne actuellement sélectionnée

       
        this.ajouterLigne = function() {
            var ligne = new Ligne(this);
            ...
            this.lignes.push(ligne);
            ...
        }
       
        this.supprimerLigne = function() {
            ...

        }

        // Sélectionne la ligne passée en paramètre
        this. selectLigne: function(ligne) {
            ...

        }


        ...

      
        // Classe représentant une ligne du tableau
        function Ligne(tableauParent) {

            this.cellules = new Array(); // Cellules contenues dans la ligne
            this.ligneElt = null;        // Elément html de la ligne (balise <tr>)
            this.tableauParent = tableauParent; // Lien vers le tableau conteneur ,
                                                // de classe Tableau
            this.celluleSelectionnee = null;
           
            // Classe représentant une cellule d'une ligne
            function Cellule(ligneContenante) {
                ...

            }
           
            // Ajoute une cellule à la ligne
            this.ajouterCellule = function() {
                ...

            }

            // Supprime la cellule sélectionnée
            this.supprimerCellule = function() {
                ...

            }

            // (Suite du constructeur de Ligne :)

          
     /***/   this.ligneElt = Builder.node('tr', {
                onClick: 'this.ligne.tableauParent.selectLigne(this.ligne);'
            });
            this.ligneElt.ligne = this;
        }
    }


/**/ $() est une fonction du framework Prototype. C'est (en gros) un substitut de document.getElementById().

/***/Builder.node() est une function tirée du framework de Scriptaculous et documentée à l'adresse suivante:
http://wiki.github.com/madrobby/scriptaculous/builder
Elle permet de créer des balises html de manière concise et lisible pour l'utilisateur.


La ligne en rouge est celle qui est mal interprétée par IE, mais correctement par les autres navigateurs. La ligne en bleu montre un exemple d'utilisation dans le code de la propriété ligne de la balise html <tr>.

Dans la ligne en rouge, ce que je veux finalement c'est qu'à l'objet représentant dans le DOM la ligne physique (balise <tr>) soit ajouté, en tant que propriété, l'objet ligne de classe Ligne. Comme ça, on peut le mentionner directement dans le onclick de la ligne (ligne bleue) par this.ligne.


Or, Internet Explorer, lui, n'ajoute pas ligne en tant que propriété du DOM, mais ajoute à la balise <tr> de la ligne un attribut ligne, en faisant un toString() de l'objet ligne. A l'inspection du code HTML généré, cela donne:

<tr ligne="[Object object]"
    onClick:'this.ligne.tableauParent.selectLigne(this.ligne);' >

Le onClick ne peut donc pas fonctionner...


--> Ma question est donc:
Connaissez-vous un moyen de procéder sur Internet Explorer pour ajouter à l'objet DOM d'un élément HTML une propriété DOM supplémentaire (objet personnalisé ou n'importe quel objet prédéfini ou type primitif)?
Sinon toute autre solution serait la bienvenue pour pouvoir retrouver dynamiquement un objet javascript quelconque à partir d'un élément HTML.

Merci

Bonjour,

comme il y a une foultitude de "bibliothèques de fonctions" ( Prototype, Scriptaculous... ),
je passe la main.
mais, justement, ces outils permettent ( il parait ) de s'affranchir des différences
entre les navigateurs.... donc soit elles ont un bug ( je doute , soit ( et je pense
plutôt à ça ) tu n'utilises pas comme il faut.
il faudrait voir ce que fait cette fonction Builder.node pour le onclick.
( si c'est setAttribute, regarde ici )

Cordialement [mon Site] [M'écrire] Bul

Je vais essayer sans Builder.node(), pour voir. Mais je n'y crois pas, car le problème n'intervient pas ici, au moment de la construction du <tr> avec son onclick(), mais au niveau de l'affectation de l'objet javascript comme propriété DOM du <tr>, comme je l'ai expliqué dans mon précédent message.

Je te dis si j'ai du nouveau. Merci de t'intéresser à mon problème.

t'as probablement expliqué, mais ce que je peux te dire
c'est que un_élément.onclick=function() { ce qu'on veut... }
ça baigne toujours et partout
t'es trop sophistiqué pour moi, je suis un béotien, et me parler
d'un objet javascript tel que tu en parles.... j'ai du mal  !!
les "bibliothèques de fonctions" que utilise fonctionnent,
certes... je ne m'y intéresse pas du tout

Bon, je viens de faire quelques essais, et effectivement le problème venait bien du onclick() passé dans Builder.node() !
En fait, c'est le fait de le passer sous forme de chaîne de caractères qui ne fonctionne pas. J'ai essayé avec succès de la façon suivante:

this.ligneElt = Builder.node('tr', {
         onclick: function() { this.ligne. tableauParent .selectLigne(this.ligne); }
     });


En plus, je l'avais mal orthographié. J'avais mis une majuscule au milieu: onClick, alors que c'est onclick.

Merci pour ton aide. Comme quoi le problème ne venait pas de là où je le croyais. Internet Exporer continue à m'afficher un attribut ligne="[Object object]", mais le code réagit normalement, comme si la propriété DOM avait bien été affectée. Comme je n'ai rien pour inspecter le DOM sous IE, je ne peux pas le voir.

Merci encore!

>>Comme je n'ai rien pour inspecter le DOM sous IE, je ne peux pas le voir.
ben.... je t'ai mis un tableau, qu'il suffit de regarder
mais avec IE8, tout est dispo... directement.
@+