方法というか手法はいくつかあります。
DOMオブジェクトにプロパティをセットする方法
質問からjsを前提としていると思われるので、まずこの方法が可能です。
任意のHTML要素に対応するDOMオブジェクトはそれ自体通常のjsにおけるオブジェクトですから、直接プロパティを定義することができます。
// HTMLにて
// <div id="target"></div>
const div = document.querySelector('#target');
// プロパティをセット
div.myProperty = 'myValue';
// プロパティを読み出し
console.assert(document.querySelector('#target').myProperty === 'myValue');
ただしこの方法はあまり推薦されません。理由としては次があります。
- すでにあるプロパティとの名前の重複
- DOMが実装としてこれらの値を保持するかは不明(注:未検証です)
- そのプロパティがどのアプリケーションによって使用されているか不明瞭
オブジェクトからDOMオブジェクトを参照する
前述の問題を解決する手法として最も普遍的な解決策は、DOM要素を参照することです。
質問文にあるBox
クラスから<div>
要素に対応するDOMオブジェクトを参照します。
// class Box
const Box = function(domElement) {
// DOMオブジェクトを参照
this.$el = domElement;
};
// インスタンスの生成は、コンストラクタに対象となるDOMオブジェクトを渡します
const box1 = new Box(document.createElement('div'));
const box2 = new Box(document.querySelector('div#target'));
このオブジェクトに対する操作を対象となる要素に適用する場合は、this.$el
プロパティにセットされたDOM要素に対してなんらかの処理を行うようにします。
// for example
Box.prototype.move = function (duration) {
this.$el.style.left += this.speedX * duration;
this.$el.style.top += this.speedY * duration;
};
こちらはあまりjs的でないソリューションで、限定的ですが使われるケースもあるので紹介しておきます。
具体的には、data-[独自のプロパティ名]
で定義されるプロパティをHTML要素に設定します。
この手法も「DOMオブジェクトにプロパティをセットする方法」で述べた欠点を持ちますが、HTMLが書き換わっていたほうが都合がいい(あとで使う場合や、アプリケーション間の連携など?)では有効な場合があります。
操作はjsで行う場合Element.getAttribute/Element.setAttributeメソッドを使う方法、HTMLElement.datasetプロパティを経由してアクセスする方法があります。
const example = document.createElement('div');
// setAttributeを用いて独自プロパティを定義
example.setAttribute('data-myProperty', 'myValue');
// getAttributeを用いて独自プロパティを読み出し
console.assert(example.getAttribute('data-myProperty') === 'myValue');
// or
console.assert(example.dataset.myProperty === 'myValue');
個人的な見解としては、特別な事情がある場合(どうしてそうする必要があるか説明できる場合)を除いて、二番目の方法をおすすめします。以上、参考になれば幸いです。