javascript - HTMLObjects に変数を定義する

Question

Javascript で html オブジェクトに変数を追加したい場合、2 つの方法があります。data-x="" 属性を使用するか、変数をオブジェクトに直接追加できますよね? 何が良いですか？

例えば：

obj = document.getElementById("x")

次のように変数を定義すると、有効な Javascript になりますか?:

obj = document.getElementById("obj");
//from the data attribute
data = obj.getAttribute("data-x");
//directly
obj.data = "test";
data = obj.data;

ここで最も正しいのはどれですか？ありがとうございました。