jQueryのdata()をJavaScriptで実装する代替サンプルコード

2023-08-01

jQueryのdata()メソッドは、HTML要素にデータを関連付けるための便利な機能です。これをJavaScriptで代替するには、datasetプロパティを使用することができます。以下に、data()メソッドを使用した代替サンプルコードを示します。

// HTML要素の取得
const element = document.getElementById('your-element-id');

// データの設定
element.dataset.key = 'value';

// データの取得
const value = element.dataset.key;

// データの削除
delete element.dataset.key;

上記のコードでは、element変数に対象のHTML要素を取得し、datasetプロパティを介してデータを設定、取得、削除しています。データのキーは、datasetオブジェクトのプロパティ名として使用されます。

たとえば、<div id="your-element-id"></div>というHTML要素がある場合、element.dataset.key = 'value';とすることで、その要素にkeyというデータキーとvalueという値が関連付けられます。また、const value = element.dataset.key;とすることで、データの値を取得できます。

このようにして、JavaScriptのdatasetプロパティを使用することで、jQueryのdata()メソッドの代替となる機能を実装することができます。