.data()メソッドで指定したdata-*グローバル属性の属性値が取得できる

こんにちは、たわらです。

本記事では、jQueryの.data()メソッドについて整理しました。

jQueryの`.data()メソッド`

たとえば、こんなふうに使います。これは何をしているのかというと、、、

const commentId = $(this).data("comment-id")

thisで指定した要素を$()で囲むことで、HTML文書内からthisを探し出して、その要素をjQueryオブジェクトに変えています。

そして、jQueryオブジェクトのなかから、"comment-id"という属性の属性値を取得しているのです。

正確には、あるHTML要素のdata-*グローバル属性の属性値を取得しています。

あと出しになってしまいますが、thisはこのようなHTML要素でした。

<button class="btn btn-success js-button-comment-update" data-comment-id="<%= comment.id %>">更新</button>

更新ボタンを表示するというbuttonタグでした。で、このbuttonタグに持たせている属性のひとつが、data-*グローバル属性です。

data-comment-id="<%= comment.id %>"

ここですね。

グローバル属性というのは、どんなタグにも属性として持たせることができるから、そう呼ばれるようです。

何をするのかというと、、、

data-* グローバル属性はカスタムデータ属性と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。

とのこと。DOM表現というのが、jQueryオブジェクトとなったタグなどのHTML要素を右に左にすることだと思います。

なので、整理すると、

const commentId = $(this).data("comment-id")の

.data("comment-id")の部分は、指定された要素（この場合はthis）のdata-comment-idを探しに行きます。

そして、data-comment-id="<%= comment.id %>"を見つけ、

属性値である"<%= comment.id %>"を取得します。

data-hogehogeを探しに行く、というところがミソですね。

整理すると簡単ですが、基本的なHTMLタグの属性に関する知識がなかったので、理解まで時間がかかりました。

読んでくださったかた、ありがとうございます。