.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 タグの属性に関する知識がなかったので、理解まで時間がかかりました。

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