36504
htmlの`div`要素にプロパティのようなものを付け加えることはできませんか？

例えば`div`がたくさんあって、  
それぞれの固有のスピードでアニメーションさせたい時に、  
`div.speedX`とかという感じで、  
`div`にプロパティを持たせるということがしたいです。

```

    var Box = function() {
      this.seepdX;
      this.speedY;
    }
    
```

のようにBoxクラスを定義して、

```

    var box = new Box();
    
```

というようにインスタンスを生成するような形にするとしても、

`div`要素とどんな形で関連づければいいのかがわかりません。
CC BY-SA 3.0
2017-07-19T12:53:02.917
36502
2017-07-19T14:16:39.143
12297
question
javascript html jquery
htmlの<div>要素にプロパティのようなものを付け加えることはできませんか？
方法というか手法はいくつかあります。

## 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;
    };
    
```

## (補足)HTMLの[custom data attribute](https://developer.mozilla.org/en-
US/docs/Web/HTML/Global_attributes/data-*)を用いる方法

こちらはあまりjs的でないソリューションで、限定的ですが使われるケースもあるので紹介しておきます。  
具体的には、`data-[独自のプロパティ名]`で定義されるプロパティをHTML要素に設定します。  
この手法も「DOMオブジェクトにプロパティをセットする方法」で述べた欠点を持ちますが、HTMLが書き換わっていたほうが都合がいい（あとで使う場合や、アプリケーション間の連携など？）では有効な場合があります。  
操作はjsで行う場合[Element.getAttribute](https://developer.mozilla.org/en-
US/docs/Web/API/Element/getAttribute)/[Element.setAttribute](https://developer.mozilla.org/en-
US/docs/Web/API/Element/setAttribute)メソッドを使う方法、[HTMLElement.dataset](https://developer.mozilla.org/en-
US/docs/Web/API/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');
    
```

個人的な見解としては、特別な事情がある場合（どうしてそうする必要があるか説明できる場合）を除いて、二番目の方法をおすすめします。以上、参考になれば幸いです。
CC BY-SA 3.0
2017-07-19T13:37:00.030
36504
2017-07-19T14:16:39.143
2017-07-19T14:16:39.143
36502
answer