Stocker un attribut (ou une propriété) arbitraire à un noeud du dom [Résolu]

[_ash_]

Bonjour,

Je souhaite , sur une page que je génère dynamiquement, passer des variables à des noeuds du DOM, afin de pouvoir travailler dessus en js.

Conceptuellement, je souhaite avoir une page html contenant par exemple :

Code html :

1
2
 
<div id="myDiv" myValue="hello world">...</div>

Toutefois, je suppose que générer un tel code html n'est pas très propre (en particulier, je dois violer allègrement ma dtd) ; et je n'ai aucune certitude quant à la portabilité de cette solution.

Aussi, ma question est : quelle est la manière canonique de
- passer de telles valeurs lors de la génération dynamique de ma page
- lire / réécrire ces valeurs, en js, durant la durée de vie de ma page ?

(À titre indicatif : je souhaite, pour ma culture, savoir comment le faire en js "pur", mais puisque j'utilise mootools, des réponses utilisant ce framework me satisferont également)

Je vous remercie par avance.

[javatwister]

disons que tu peux affecter une propriété arbitraire à un objet dom par simple déclaration;

Code :

mon_objet.myValue="Hello World";

ce qui ne déclenchera pas une apocalypse au niveau du dom;

[_ash_]

Merci pour cette réponse. En faisant ainsi, je peux associer des variables à des noeuds du dom durant la vie de la page.

En revanche, m'est-il possible de faire en sorte d'avoir ces variables dès le départ (ie : avant que le js s'exécute), ou alors dois-je obligatoirement ajouter une couche de js d'initialisation pour setter ces valeurs ?

[SpaceFrog]

malheureusement tous les navigateurs ne reconnaissent pas les propriétés exotiques au démarrage.
Il te faudra en effet ajouter une couche d'initialisation su le onload de la page.

Certains ne sont pas firands de cette methode de surcharge de propriétés des objets.
Jquery utilise un data() qui permet de stocker des données au niveau de l'objet sans modifier le DOM

[_ash_]

Je vous remercie pour ces réponses, qui m'aident à y voir plus clair.
Je vais pouvoir adapter mon code en conséquence.

[dukej]

Envoyé par SpaceFrog

malheureusement tous les navigateurs ne reconnaissent pas les propriétés exotiques au démarrage.

FAUX :
element.getAttribute('monattribut');
fontionnera PARTOUT.

Envoyé par SpaceFrog

Il te faudra en effet ajouter une couche d'initialisation su le onload de la page.

Inutile, et rajoute plus de taf que nécessaire

Envoyé par SpaceFrog

Certains ne sont pas firands de cette methode de surcharge de propriétés des objets.

Oui, car les DTD sont là pour justement spécifier le HTML, mais au final un attribut exotique c'est n'est pas la mort.

Envoyé par SpaceFrog

Jquery utilise un data() qui permet de stocker des données au niveau de l'objet sans modifier le DOM

Voila une solution

[_ash_]

Merci pour ces précisions !

[SpaceFrog]

Code :

1
2
element.getAttribute('monattribut');
fontionnera PARTOUT.

ha ben celui là je ne l'utilise jamais ...


En fait comme je code valide w3c en strict, tout attribut exotique est rejeté dans le html au départ. si par hasard j'ai besoin dans un contexte sans lib d'avoir un attribut sur un objet ce qui n'est en effet pas la mort, je l'attribues dans un init.
Sinon j'utilise le data de jquery

[dukej]

Envoyé par SpaceFrog

Code :

ha ben celui là je ne l'utilise jamais ...


En fait comme je code valide w3c en strict, tout attribut exotique est rejeté dans le html au départ. si par hasard j'ai besoin dans un contexte sans lib d'avoir un attribut sur un objet ce qui n'est en effet pas la mort, je l'attribues dans un init.
Sinon j'utilise le data de jquery

Il faut faire la différence entre un attribut HTML et une propriété DOM
l'attribut HTML, tu devras plutôt venir le récupérer par "getAttribute" que par un elm.attribut

[SpaceFrog]

Oui mais ayant pris pour habitude de code en valide strict, je ne me sers jamais des attributs html.

[Loceka]

Envoyé par SpaceFrog

Oui mais ayant pris pour habitude de code en valide strict, je ne me sers jamais des attributs html.

Quel rapport avec le "strict" ? (c'est une vraie question, j'ai jamais vraiment codé en strict : c'est trop chiant ^_^)

[SpaceFrog]

un validateur w3c te pointe une erreur si tu colles un attribut exotique dans une balise html. D'ou le fait que je n'en utilise jamais.

[sekaijin]

Une petite précision sur les attributs et propriétés.

lorsque on utilise du code HTML comme

Code html :

<div id="myDiv" myValue="hello world">...</div>

l'interprète html génère un élément DOM div qui possède un attribut myDiv ayant la valeur "hello world"

lorsqu'on utilise

Code :

mon_objet.myValue="Hello World";

si un attribut myValue existe alors il est mis à jour sinon la propriété myValue est crée.

Certain navigateur acceptent plus ou moins bien les attributs non standard.
Le Document Type peut influer sur cette interprétation.
Le HTML Strict sera plus contraignant que transient.

mais il y a une fonction du DOM qu'on oublie un peu c'est le support des namespaces.

Code html :

1
2
3
4
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:perso="urn:fr.mydomain.myapp">
...
<div id="myDiv" perso:myValue="hello world">...</div>

l'urn à fournir pour le name space doit être unique (ce peut être une url)
en général on utilise un nom de domaine inversé.

ensuite les attributs son préfixé du nom du namespace.
ici "perso"
normalement on met ce que l'on veut
pour faire dans les règles on devrait dans les traitement chercher l'attribut xmlns:... ayant pour valeur son url pour déterminer ce préfixe.
souvent son se content d'utiliser directement ce qu'on à mis.

le déterminer dynamiquement permet de fournir une lib qui traitera ces attribut sans avoir à connaitre à l'avance ce que choisira le développeur.

ensuite dans le code le DOM fournis les méthodes getAttributeNS et setAttributeNS

voici un exemple

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fast="urn:org.jquery.fast"
      fast:includePath="js/components/">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Demo org.jquery.fast.js</title>
      <script type="text/javascript" src="js/jquery-latest.js"></script>
      <script type="text/javascript" src="js/org.jquery.fast.js"></script>
      <link href="style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
    <form fast:class="AutoForm"><pre>
       <input type="text"    fast:checktype="nameOrNull" id="nom">
       <input type="text"    fast:checktype="email"      id="adresse">
       <input type="text"    fast:checktype="phone"      id="telephone">

la librairie js/org.jquery.fast.js va chercher le namespace don l'urn est urn:org.jquery.fast
puis elle va traiter tous les attributs du namespace
fast:includePath lui donne le chemin pour inclures les composants
fast:class lui indique qu'un tag doit être traité par le composant ...
fast:checktype attache une méthode de vérification

etc.

on reste ainsi conforme au W3C
reste un détail d'importance.
pour faire une validation du code HTML il faut écrire une DTD (je préfère les schémas xsd) qui inclus HTML et le Namespace.
ce n'est pas toujours simple.

A+JYT