Discussion :

[cetteame]

Bonjour,

N'étant pas très expérimenté en JavaScript et n'ayant rien trouvé sur Google, je pose la question ici :

Je me demandais si une variable attachée à un élément du DOM pouvait être une bonne pratique.

Concrètement, j'ai différent <input type="text"> dans ma page. Leur nombre et leur id est dynamique. Ces input contiennent un nombre sous forme de texte parce qu'il a une unité, une virgule, etc (par exemple : "12,48 €"). J'ai besoin de leur valeur en tant que nombre pour mes manipulations en JavaScript. Du coup, je pensais la stocker dans une variable attachée à l'élément du DOM (input.montant = 12.48; ).
[EDIT] Un exemple ultra simplifié : http://jsfiddle.net/wJmXv/
Est-ce que la ligne "this.montant = 1234.56;" vous semble bien ?

Est-ce que ça vous semble bon ? Ou est-ce que ça pose des problèmes de compatibilité ou ralentissement d’exécution ?

Merci pour vos ais plus éclairé que le mien.

[headmax]

Salut l'attachement de variable ("HTML5") directement sur le dom est possible et compatible sur tout les navigateurs je pense que oui faut tester, les version IE7 6 ... Je suis septique.
Par contre tu sera limite à ses attributs sur le dom.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script>
window.onload = function(){
var dataValue = document.getElementById("maDiv").getAttribute("data-value");
alert(dataValue);
}
</script>
<div id="maDiv" data-type="homme" data-id="110" data-value="test value"></div>

[NoSmoking]

Bonsoir,

Bonjour,
Concrètement, j'ai différent <input type="text"> dans ma page. Leur nombre et leur id est dynamique. Ces input contiennent un nombre sous forme de texte parce qu'il a une unité, une virgule, etc (par exemple : "12,48 €"). J'ai besoin de leur valeur en tant que nombre pour mes manipulations en JavaScript. Du coup, je pensais la stocker dans une variable attachée à l'élément du DOM (input.montant = 12.48; ).

comment comptes tu mettre leurs "variable attachée" à jour lors d'une modification de leur valeur, via le javascript en lisant la value, en la convertissant en un Number exploitable...donc autant ne le faire que quand tu en as besoin pour les calculs sans t'embarrasser d'une "variable attachée".

Tu pourrais également, ce qui me parait plus correct que la "variable attachée", passer par un objet qui serait mis à jour sur le onchange, par exemple, des INPUTS, et te servir de celui ci lors de tes manipulations.

[cetteame]

Salut l'attachement de variable ("HTML5") directement sur le dom est possible et compatible sur tout les navigateurs je pense que oui faut tester, les version IE7 6 ... Je suis septique.

Ce que je voudrais faire pourrait ressembler à ça : http://jsfiddle.net/wJmXv/
Je ne supporte pas IE6, par contre je viens de tester avec IE7, 8 et 9 et ça marche.

Par contre tu sera limite à ses attributs sur le dom.

Là, je ne comprends pas ce que tu veux dire. Je ne pensais pas écrire le contenu de ma variable dans le DOM, mais attacher une variable à un élément du DOM au lieu d'un objet abstrait. J'imagine que mon exemple précédant me fera mieux comprendre.

Bonsoir,comment comptes tu mettre leurs "variable attachée" à jour lors d'une modification de leur valeur, via le javascript en lisant la value, en la convertissant en un Number exploitable...donc autant ne le faire que quand tu en as besoin pour les calculs sans t'embarrasser d'une "variable attachée".

Heu... Si je fais comme ça, c'est pas bon ? http://jsfiddle.net/wJmXv/1/
Je n'ai pas l'impression de "convertir dans un number exploitable". Mais peut-être que ça n'est justement pas bien ?

Tu pourrais également, ce qui me parait plus correct que la "variable attachée", passer par un objet qui serait mis à jour sur le onchange, par exemple, des INPUTS, et te servir de celui ci lors de tes manipulations.

Au tout début de mon projet, j'étais parti sur une idée comme ça. Mais comme le nombre de mes inputs change, je me retrouvais avec un objet à dimension variable que mon niveau en JavaScript me donnait du mal à gérer.

Pour différents autres problèmes, j'avais besoin de recommencer mon développement à zéro. Je me suis dit à ce moment-là que je pourrais peut-être changer d'approche en attachant mes variables aux input dont elles dépendent.

De mon point de vue, j'ai l'impression d'avoir un truc plus simple (pas d'objet abstrait à gérer en parallèle des input) qui me semble assez cohérent. Mais je ne suis pas un spécialiste et j'aimerais bien éviter de tout redévelopper à partir de 0 une fois de plus. Du coup, je préfère demander vos avis avant d'être trop avancé dans mon projet.

merci en tous cas pour vos 2 réponses.

[SpaceFrog]

sinon sortir l'unité de l'input ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="foo" value="" />€

[sekaijin]

Je sens dans ce post une grande confusion entre le DOM et le HTML

le code HTML n'est pas le DOM et le DOM n'est pas le code HTML

il est tout a fait possible d'ajouter un membre (variable, fonction) à un élément du DOM est cela depuis le début de javascript sur le navigateur.

un membre d'un élément du DOM est un membre d'un Objet javascript comme un autre.

la syntaxe est des plus simple

Code javascriipt :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
window.onload = function(){
   document.getElementById("maDiv").dataValue = {'ce' : 'que', 'je': 'veux'};
   alert(document.getElementById("maDiv").dataValue.ce);
 
   document.getElementById("maDiv").onclick = function () {
      alert(this.dataValue.ce);
   };
 
}

C'est un principe de base de javascript tout objet peut s'enrichir de tous les membres que l'on veut.

il faut tout de même prendre des précautions. en effet le w3c définit le DOM mais pas l'implémentation qui en est faite.

ainsi il y a en théorie une différence entre un attribut d'un élément du dom et un membre d'un objet de type élément du dom.

si vous avez un débugger javascript en inspectant un élément du DOM vous lui trouverez de nombreux membres qui ne sont pas des attributs.

mais la norme ne dit rien sur un membre et un attribut qui auraient le même nom.

suivent les implémentations un élément du DOM peu avoir un membre et un attribut de même nom tout en étant des objets distinct
ou alors un membre et un attribut de même nom sont un seul est unique objet. en clair

Code javascriipt :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
window.onload = function(){
   document.getElementById("maDiv").dataValue = 15;
   document.getElementById("maDiv").setAttribute("dataValue", 25;
   alert(document.getElementById("maDiv").dataValue);
   alert(document.getElementById("maDiv").getAttribute("dataValue"));
}

va afficher sur certaines implémentations 25 et 25 et sur d'autres 15 et 25.

je ne me souviens pas comment se comporte tous les navigateurs mais je dirais de mémoire que pour un DOM-HTML (le DOM est défini pour XML et il existe des implémentation hors des navigateurs pour XML) dans un navigateur

le membre et l'attribut sont confondus.
attention donc aux effet de bord.

vu le risque en question minime mais existant cela ne semble pas être une bonne idée. elle simplifie pourtant bien des chose.

imaginons un système d'onglets fait avec une liste à puce un div pour chaque contenu et un div contenant le tout.
pour faire fonctionner tout ça j'ai besoin de référence au div et puce en question garder une ref au div courant. sans ça impossible de changer d'onglet.
la solution immédiate consiste à garder des variables et à les manipuler globalement.

pour faire plus propre on met le tout dans un objets
pour mettre plusieurs jeux d'onglet dans la page on en vient à un tableau d'objet.
et il est relativement facile d'ajouter de nouveau systèmes d'onglets dans la page.

mais il faut garder tout cela cohérent. et surtout ne pas oublier de supprimer l'objet dans la variable lorsqu'on détruit les div et autres puces.

si nous reprenons le même système d'onglet et que maintenant sur chaque élément du système nous lui attachons les variables et méthodes dont il a besoin.
notre système d'onglet fonction aussi simplement
il peut être instancier autant de fois que l'on veux on peut en imbriquer autant qu'on veux et on peut en ajouter et en supprimer à l'envie.
la suppression du Div contenant le système entraîne de fait la suppression de ses membres.

aucun risque de collision de variables pas de fonction don le nom entrerait en conflit avec un lib un ensemble totalement autonome.

bref comme toujours il faut bien penser ce que l'on fait pour en obtenir le meilleur.

ce n'est pour moi pas un mauvaise pratique en tout cas.
A+JYT

[SpaceFrog]

des les attributs data-xxx

on se sert de ces attributs en jquery qui parse le code html pour remonter un data au niveau de l'objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="maDiv" data-type="homme" data-id="110" data-value="test value"></div>

en jquery on peut ainsi récupérer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#maDiv'].data('type')

[headmax]

Salut d'après ton exemple en jquery, tu peux faire en javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
var i=1; //nombres de clicks pour incrémenté sinon tu met 1 à la place de i pour un seul click
document.getElementById("input").onclick = function(){
	//Je creer un attribut et lui affect la valeur de l'input
    this.setAttribute("data-value",this.getAttribute("value")); 
    //Je creer un object montant comme l'exemple et affecte la valeur de départ dans data-value
    this.montant = document.getElementById("input").getAttribute("data-value");
	//J'affecte à la valeur de l'input this.montant+ la valeur d'incrémentation, formaté avec la bonne chaine
    this.value = (parseFloat(this.montant)+i)+" €";
    //J'écrit le message dans le span...
    document.getElementById("legende").innerHTML = "Le montant du champs + i = "+(parseFloat(this.montant)+i)+" €";
    i++;// à chaque click on incrémente
};
</script>

Le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input id="input" type="text" value="1234.56 €">
<span id="legende">Cliquer dans le champs</span>

Bonne chance A+

[cetteame]

sinon sortir l'unité de l'input ...

J'avais pensé à une solution comme ça, voire à mettre l'unité en background-image dans mon input. Mais j'avais laissé tombé cette idée en me disant qu'un copie du montant (CTRL + A et CTRL + C) ne me permettait pas d'avoir l'unité. D'autres contraintes que je me suis donné (séparer les milliers avec un espace, exemple : 12 345,67 €) me poussent dans tous les cas à gérer le contenu de mon input en tant que texte sur lequel j'applique une mise en forme en JavaScript au fur et à mesure de la frappe de l'internaute. Du coup ma question concernait bien le fait d'attacher une variable correspondant à la valeur numérique de l'input (12345.67) pour un traitement non visible sur la page (déclencher des évènements quand la valeur change, quand la valeur dépasse un seuil, etc.)

Je sens dans ce post une grande confusion entre le DOM et le HTML

Merci pour tes explications qui corrige les abus de langage de mon inexpérience.

ce n'est pour moi pas un mauvaise pratique en tout cas.

Super ! Me voilà rassuré.

des les attributs data-xxx

on se sert de ces attributs en jquery qui parse le code html pour remonter un data au niveau de l'objet

Dans l'idée, je ne vois pas de nécessité à modifier le html. J'imagine que le risque de repaint ou reflow est limité avec les attributs data-xxx. Mais est-ce nécessaire ou plus optimal que d'affecter directement une variable sur mon input comme je l'ai fait dans mon exemple ?

Salut d'après ton exemple en jquery, tu peux faire en javascript

Je me sert de jQuery pour d'autres actions dans cette page. Je ne me passerai donc pas de devoir charger ce script. Mais merci pour cette instructive adaptation en Javascript.

[NoSmoking]

Je sens dans ce post une grande confusion entre le DOM et le HTML

Il n'est pas question de revenir sur le fait que le DOM est construit lors de l'interprétation du code HTML de la page et que pour chaque noeuds crées javascript associe un HTMLElement.
Les attributs HTML et les propriétés javascript sont la plupart du temps intimement liées et la modification de l'un mets à jour l'autre.

L'ajout d'une propriété personnalisée à un élément du DOM est tout à fait possible, il n'est qu'à regarder ce que rajoutent les navigateurs, mais dans ce cas la liaison entre HTML et le DOM n'existe pas.

En clair dans le cas de cetteame lors de la modification de la value d'un INPUT il faut bien mettre à jour la propriété correspondante, ce qui n'est pas le cas dans les codes fournis.

Si cette propriété, de format différent , est utilisé pour du calcul, il faut la convertir de String en Number, pour la mise à jour, donc il est suffisant de le faire lors du calcul le rajout de cette propriété n'apportant pas grand chose.

Le passage par un objet, mis à jour sur le onchange des éléments permet simplement les mises à jour en "temps masqué" et de faire le calcul en parcourant les données de l'objet, ce qui sera toujours plus rapide que d'accéder aux différents éléments du DOM.

[sekaijin]

des les attributs data-xxx

on se sert de ces attributs en jquery qui parse le code html pour remonter un data au niveau de l'objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="maDiv" data-type="homme" data-id="110" data-value="test value"></div>

en jquery on peut ainsi récupérer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#maDiv'].data('type')

Attention
JQuery ne parse pas le HTML
JQuery parcour le DOM crée par le navigateur à partir du HTML

je pense qu'on fait bien trop souvant des abuts de langage sur le sujet et que du coup on introduit des confusion
ainsi le get attribute data-value est inutile dans ce code

Salut d'après ton exemple en jquery, tu peux faire en javascript :

Code javascript" :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
//ne ser à rien
//var i=1; //nombres de clicks pour incrémenté sinon tu met 1 à la place de i pour un seul click
document.getElementById("input").onclick = function(){
    if (!this.legende) {
        //on cherche la légende associe une seul fois lors du premier click
        this.legende = document.getElementById("legende");
    }
    //Je creer un attribut et lui affect la valeur de l'input
    //Ne sert a rien a supprimer
    //this.setAttribute("data-value",this.getAttribute("value")); 
 
    //Je creer un object montant comme l'exemple et affecte la valeur de départ dans data-value
    //this.montant = document.getElementById("input").getAttribute("data-value");
    // a remplacer par value et au passage on parse car ces le montant qui nous intéresse pas le texte de l'input
    // mais il innutile de parcer le montant si on l'a fait au clik precedent
    if (!this.montant){
        this.montant = parseFloat(this.getAttribute("value");
    }
    // ne reste qu'a incrémenter le montant
    this.montant++;
    //J'affecte à la valeur de l'input this.montant+ la valeur d'incrémentation, formaté avec la bonne chaine
    //this.value = (parseFloat(this.montant)+i)+" €";
    // le montant étant un number on obtient (de plus value est un attribut)
    this.setAttribute("value", this.montant+" €");
    //J'écrit le message dans le span...
    //document.getElementById("legende").innerHTML = "Le montant du champs + i = "+(parseFloat(this.montant)+i)+" €";
    //inutile de tout recalculer on l'a dans value et on utilise la référence à la légende
    this.legende.innerHTML = "Le montant du champs + i = "+this.getAttribute("value");
    //ne sert à rien i++;// à chaque click on incrémente
};

Le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input id="input" type="text" value="1234.56 €">
<span id="legende">Cliquer dans le champs</span>

Bonne chance A+

l'usage de la référence à legende et typiquement le genre de chose qui simplifie le code et accélère l'exécution (on ne fait le gestElement qu'une seule fois) de plus si on détruit l'element input on n'a pas de variable qui reste en memoire. c'est donc propre, simple et efficace.

idem pour le montant montant etant un membre de input il faut bien définir son rôle s'il ne ser que de copie de travail de value alors inutile d'en faire un membre.
mais l'input dont tu a besoin a un montant et une représentation (string) de ce montant. en faisant de montant un membre on a tout intérêt à lui faire porter cette sémentique.
du coup au premier click on initialise le montant en parsant la valeur de l'input

ne rest plus qu'a l'incrémenter de 1 à chaque click
à formater le montant et l'afficher dans l'input et la légende.

on peut du coup aller plus loin car le même code est réplicable à l'infini

Code javascript" :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function convertToCurrency(inputId, legendeId) {
  var input = document.getElementById(inputId);
  //initialisation du montant et de la legende
  input.legende = document.getElementById(legendeId);
  input.montant = parseFloat(input.getAttribute("value");
 
  input.onclick = function(){
    this.montant++;
    this.setAttribute("value", this.montant+" €");
    this.legende.innerHTML = "Le montant du champs + i = "+this.getAttribute("value");
  };
}
convertToCurrency("input1", "legende1");
convertToCurrency("input2", "legende2")

Le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<input id="input1" type="text" value="1234.56 €">
<span id="legende1">Cliquer dans le champs</span>
<input id="input2" type="text" value="1239.56 €">
<span id="legende2">Cliquer dans le champs</span>

la seule chose que faisait data-value en plus c'etait de conserver la valeur initiale mais il y a déjà dans le Dom un membre des input qui fait ça de memoire defaulValue (nécéssaire au dom pour pouvoir faire form.reset())
A+JYT

[Bovino]

Pour info, les attributs de type data sont destinés à être utilisés de façon similaire à jQuery !
On utilise getAttribute('data-xxx') uniquement à cause d'IE < 10 qui ne reconnait pas les dataset.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>data</title>
</head>
<body>
	<div id="data" data-nom="toto"></div>
	<script>
		alert(document.getElementById('data').dataset.nom);
	</script>
</body>
</html>

[sekaijin]

oui mais dans le code de headmax
le montant n'est pas transmit via un attribut html il est lu dans l'attribut value

utiliser un attribut dans le code HTML pour en disposer ensuite dans le DOM est une pratique qui me semble saine

mais lorsque le HTML n'a aucun attribut particulier je ne vois pas en quoi en ajouter dynamiquement change la donne
de plus dans ce cas cela oblige à sérialiser et dé-sérialiser à chaque fois. l'utilisation d'un membre data est alors largement suffisent.
lorsqu'on a le html suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="maDiv"></div>

il est plus simple de faire

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
myDomElement.data.duree ++;
myDomElement.data = {
 nom: 'toto',
 age: 18,
 cheveux: 'brun'
};

que

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
myDomElement.setAttribute('data-duree', parseInt(myDomElement.getAttribute('data-duree'))+1);
 
myDomElement.setAttribute('data-nom', 'toto');,
myDomElement.setAttribute('data-age', '18');
myDomElement.setAttribute('data-cheveux', 'brun');

ce deuxième code est interessant lorsque on a le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="maDiv" data-duree="0" data-nom="paul" data-age="20" data-cheveux="roux"></div>

car la on va manipuler les valeur transmise par le source HTML au DOM.

A+JYT

[headmax]

Merci sekaijin et bovino, ça éclairci bien les idées .

Bonne journée à vous.