Puis-je ajouter des propriétés arbitraires aux objets DOM ?

Question

Puis-je ajouter des propriétés arbitraires aux objets JavaScript DOM, telles que <INPUT> o <SELECT> éléments ? Ou, si je ne peux pas le faire, existe-t-il un moyen d'associer mes propres objets à des éléments de page via une propriété de référence ?

Answer 1

ECMAScript 6 dispose de WeakMap qui vous permet d'associer vos données privées à un élément DOM (ou tout autre objet) tant que cet objet existe.

const wm = new WeakMap();
el = document.getElementById("myelement");
wm.set(el, "my value");
console.log(wm.get(el)); // "my value"

Contrairement aux autres réponses, cette méthode garantit qu'il n'y aura jamais de conflit avec le nom d'une propriété ou d'une donnée.

Answer 2

Oui, vous pouvez ajouter vos propres propriétés aux objets DOM, mais n'oubliez pas de faire attention pour éviter les collisions de noms et les références circulaires.

document.getElementById("myElement").myProperty = "my value";

HTML5 a introduit un moyen valide d'attacher des données à des éléments par le biais du balisage - en utilisant la balise data- préfixe de l'attribut. Vous pouvez également utiliser cette méthode dans les documents HTML 4 sans problème, mais ils ne seront pas validés :

<div id="myElement" data-myproperty="my value"></div>

Vous pouvez y accéder via JavaScript en utilisant getAttribute() :

document.getElementById("myElement").getAttribute("data-myproperty");

Answer 3

Bien sûr, les gens le font depuis des lustres. Ce n'est pas recommandé car c'est salissant et vous risquez d'endommager les propriétés existantes.

Si vous faites tourner du code en boucle avec for..in votre code peut se casser parce que vous allez maintenant énumérer ces propriétés nouvellement attachées.

Je suggère d'utiliser quelque chose comme l'outil jQuery .data qui conserve les métadonnées attachées aux objets. Si vous ne voulez pas utiliser une bibliothèque, réimplémentez jQuery.data

Answer 4

Voulez-vous ajouter des propriétés à l'objet, ou des attributs à l'élément ?

Vous pouvez ajouter des attributs en utilisant setAttribute

var el = document.getElementById('myelement');
el.setAttribute('custom', 'value');

ou vous pouvez simplement ajouter des propriétés à l'objet javascript :

var el = document.getElementById('myelement');
el.myProperty = 'myValue';

Answer 5

Au cas où quelqu'un se demanderait en 2015, oui, vous pouvez - y C'est ce que fait jQuery dans données . Choisissez simplement des noms à l'épreuve du temps, comme des préfixes de fournisseurs ou des suffixes aléatoires basés sur le temps (jQuery).