Comment stocker des données arbitraires pour certaines balises HTML ?

Question

Je suis en train de faire une page qui a une certaine interaction fournie par javascript. Par exemple, des liens qui envoient une requête AJAX pour obtenir le contenu d'articles et qui affichent ensuite ces données dans un div. Évidemment, dans cet exemple, j'ai besoin que chaque lien stocke un élément d'information supplémentaire : l'identifiant de l'article. La façon dont j'ai géré cela dans le cas présent était de mettre cette information dans le lien href : ceci :

<a class="article" href="#5">

J'utilise ensuite jQuery pour trouver les éléments a.article et attacher le gestionnaire d'événement approprié. (ne vous attachez pas trop à la convivialité ou à la sémantique, il s'agit juste d'un exemple).

Bref, cette méthode fonctionne, mais elle odeurs un peu, et n'est pas du tout extensible (que se passe-t-il si la fonction de clic a plus d'un paramètre ? que se passe-t-il si certains de ces paramètres sont optionnels ?)

La réponse la plus évidente était d'utiliser des attributs sur l'élément. Je veux dire, c'est à ça qu'ils servent, non ? (En quelque sorte).

<a articleid="5" href="link/for/non-js-users.html">

Sur ma récente question J'ai demandé si cette méthode était valable, et il s'avère qu'à moins de définir ma propre DTD (ce que je ne fais pas), alors non, elle n'est ni valable ni fiable. Une réponse courante était de mettre les données dans le fichier class (bien que cela puisse être dû à mon exemple mal choisi), mais pour moi, cela sent encore plus mauvais. Oui, c'est techniquement valable, mais ce n'est pas une bonne solution.

Une autre méthode que j'avais utilisée dans le passé consistait à générer du JS et à l'insérer dans la page dans un fichier de type <script> créant ainsi une structure qui sera associée à l'objet.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

Mais cela peut s'avérer très pénible à entretenir et c'est généralement très désordonné.

Donc, pour en venir à la question, Comment stocker des éléments d'information arbitraires pour les balises HTML ? ?

Answer 1

Quelle version de HTML utilisez-vous ?

En HTML 5, il est tout à fait valable d'avoir attributs personnalisés préfixés par data- par exemple

<div data-internalid="1337"></div>

En XHTML, ce n'est pas vraiment valide. Si vous êtes en mode XHTML 1.1, le navigateur s'en plaindra probablement, mais en mode 1.0, la plupart des navigateurs l'ignoreront tout simplement.

Si j'étais vous, je suivrais l'approche basée sur le script. Vous pourriez le faire générer automatiquement du côté du serveur afin que sa maintenance ne soit pas une corvée.

Answer 2

Si vous utilisez déjà jQuery, vous devriez tirer parti de la méthode "data", qui est la méthode recommandée pour stocker des données arbitraires sur un élément dom avec jQuery.

Pour stocker quelque chose :

$('#myElId').data('nameYourData', { foo: 'bar' });

Pour récupérer des données :

var myData = $('#myElId').data('nameYourData');

C'est tout ce qu'il y a à dire, mais jetez un coup d'œil à la Documentation sur jQuery pour plus d'informations/exemples.

Answer 3

Une autre façon, que je n'utiliserais pas personnellement, mais qui fonctionne (assurez-vous que votre JSON est valide car eval() est dangereux).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Answer 4

Les attributs arbitraires ne sont pas valides, mais sont parfaitement fiables dans les navigateurs modernes. Si vous définissez les propriétés via javascript, vous n'avez pas à vous soucier de la validation.

Une alternative consiste à définir des attributs en javascript. jQuery dispose d'une fonction méthode d'utilité agréable juste à cet effet, ou vous pouvez rouler le vôtre.

Answer 5

Une astuce qui fonctionnera avec pratiquement tous les navigateurs possibles consiste à utiliser des classes ouvertes comme celle-ci : <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

Ce n'est pas très élégant pour les puristes, mais c'est universellement supporté, conforme aux normes et très facile à manipuler. Cela semble vraiment être la meilleure méthode possible. Si vous serialize , modifier , copie vos étiquettes, ou faire à peu près tout le reste, data restera attaché, copié, etc.

Le seul problème est que vous ne peut pas stocker des objets non sérialisables de cette façon et il pourrait y avoir des limites si vous y placez quelque chose de vraiment énorme.

Une deuxième façon est d'utiliser faux attributs comme : <a articleid='5' href="link/for/non-js-users.html">

C'est plus élégant, mais cela ne respecte pas la norme, et je ne suis pas sûr à 100% du support. De nombreux navigateurs le supportent pleinement, je pense qu'IE6 le supporte. JS d'y accéder mais pas CSS selectors (ce qui n'a pas vraiment d'importance ici), peut-être que certains navigateurs seront complètement confus, vous devez le vérifier.

Faire des choses bizarres comme sérialiser et désérialiser serait encore plus dangereux.

Utilisation de ids à l'état pur JS Le hachage fonctionne en général, sauf lorsque vous essayez de copier vos balises. Si vous avez tag <a href="..." id="link0"> et le copier via le standard JS et ensuite essayer de modifier data attaché à une seule copie, l'autre copie sera modifiée.

Ce n'est pas un problème si vous ne copiez pas tag ou utiliser lecture seulement données. Si vous copiez tag et qu'ils sont modifiés, vous devrez vous en occuper manuellement.