[解決済み】一部のHTMLタグに任意のデータを格納する方法

質問

javascriptで何らかのインタラクションを提供するページを作っています。例として、AJAXリクエストを送信して記事の内容を取得し、そのデータをdivに表示するリンクがあります。この例では、明らかに、各リンクが記事のIDという追加情報を保存する必要があります。私がこれまで行ってきた方法は、この情報を href リンクに置くことでした。

<a class="article" href="#5">

次に、jQueryを使ってa.articleの要素を見つけ、適切なイベントハンドラを添付する。 (ユーザビリティやセマンティクスにこだわる必要はありません。）

とにかく、この方法は有効ですが 匂う また、拡張性もありません (Click 関数に複数のパラメータがある場合はどうなるのでしょうか？パラメータのいくつかがオプションの場合はどうなるのでしょうか？) 。

すぐにわかる答えは、要素の属性を使用することでした。つまり、属性はそのためにあるのです。(ということです（ちょっとだけ）。

<a articleid="5" href="link/for/non-js-users.html">

で 最近の質問 この方法が有効かどうか尋ねたところ、自分でDTDを定義しない限り（私はしていません）、有効でも信頼できるものでもないことがわかりました。よくある回答は、データを class 属性は、私の選び方が悪かったせいかもしれませんが）、私には、この方がよっぽど胡散臭いです。確かに技術的には有効ですが、優れた解決策とは言えません。

私が過去に使った別の方法は、実際にJSを生成して、それをページに挿入する際に <script> タグを作成し、オブジェクトと関連付ける構造体を作成します。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

しかし、これではメンテナンスに手間がかかり、一般に非常に面倒です。

では、質問に入ります。 HTMLタグの任意の情報をどのように保存するのですか？ ?

どのように解決するのですか？

使用しているHTMLのバージョンは？

HTML 5 では、以下のように記述することはまったく問題ありません。 カスタム属性の先頭にdata-が付く 例えば、以下のようになります。

<div data-internalid="1337"></div>

XHTMLでは、これは本当に有効ではありません。XHTML 1.1 モードであれば、ブラウザはおそらく文句を言うでしょうが、1.0 モードでは、ほとんどのブラウザは黙って無視するだけでしょう。

もし私があなたなら、スクリプトベースのアプローチをとりますね。サーバーサイドで自動生成させることで、メンテナンスの手間を省くことができます。