いくつかのHTMLタグに任意のデータを保存する方法 質問する

私は JavaScript によって提供されるインタラクションのあるページを作成しています。例として、記事のコンテンツを取得するために AJAX リクエストを送信し、そのデータを div に表示するリンクがあります。明らかに、この例では、各リンクに追加の情報 (記事の ID) を保存する必要があります。私がこれまで行ってきた処理方法は、その情報を href リンクに次のように入れることでした。

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

次に、jQuery を使用して a.article 要素を見つけ、適切なイベント ハンドラーをアタッチします。(ここでは、使いやすさやセマンティクスにこだわりすぎないでください。これは単なる例です)

とにかく、この方法は機能しますが、匂い少しだけ拡張可能ではありません (クリック関数に複数のパラメータがある場合はどうなるでしょうか? それらのパラメータの一部がオプションの場合はどうなるでしょうか?)

すぐにわかる答えは、要素の属性を使用することです。つまり、それが属性の目的ですよね？（ある意味）。

<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">