一部のHTMLタグの任意のデータを保存する方法

338

私は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属性に入れることでしたが（これは私の選択が不適切な例が原因であった可能性があります）、私には、これはさらににおいがします。はい、技術的には有効ですが、優れたソリューションではありません。

私が過去に使用したもう1つの方法は、実際にJSを生成してページの<script>タグに挿入し、オブジェクトに関連付ける構造体を作成することでした。

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

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

しかし、これはお尻を維持するための本当の痛みになる可能性があり、一般的には非常に厄介です。

では、質問に答えるために、HTMLタグの任意の情報をどのように保存しますか？

javascript  html 
— ニック
ソース
2
— タマスCzinege

回答:

361

どのバージョンのHTMLを使用していますか？

HTML 5では、data-で始まるカスタム属性を持つことは完全に有効です。たとえば、

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

XHTMLでは、これは実際には有効ではありません。XHTML 1.1モードの場合、ブラウザーはおそらくそれについて文句を言うでしょうが、1.0モードの場合、ほとんどのブラウザーは黙ってそれを無視します。

私があなたなら、スクリプトベースのアプローチに従います。サーバー側で自動的に生成されるようにすることで、メンテナンスの手間を省くことができます。

— タマス・チネゲ
ソース
5
@Tchalvak：真ですが、このビットはほとんどのブラウザーで機能しますが、それでもなお機能します。
— Tamas Czinege 2010年
2
これを引き起こす唯一の問題は検証の失敗であり、IEを壊さないため、サポートを待つ理由はないと主張する人もいます。ここを参照してくださいTJ Crowlerの答え：stackoverflow.com/questions/1923278/...
— クリス・
42
data-xxx属性を使用していて、それらを取得したい場合は、サードパーティのフレームワークなしで「domElement.getAttribute（ 'data-whatever'）」を使用できます。
— Ohad Kravchick、2012年
5
パフォーマンスに注意してください！ jsperf.com/jquery-data-vs-jqueryselection-data/19
— FilmJ
19
注意：jqueryを介して1337でデータを取得するには、変数名から 'data'を必ず削除してください。たとえば、次のように使用します。次の $(this).data('internalid'); 代わりに：$(this).data('data-internalid');
— Gideon Rosenthal
134

jQueryをすでに使用している場合は、jQueryを使用してdom要素に任意のデータを格納するための推奨方法である「データ」メソッドを利用する必要があります。

何かを保存するには：

$('#myElId').data('nameYourData', { foo: 'bar' });

データを取得するには：

var myData = $('#myElId').data('nameYourData');

これですべてですが、jQueryのドキュメントで詳細情報/例を確認してください。

— Prestaul
ソース
20

もう1つの方法として、私は個人的にはこれを使用しませんが、機能します（eval（）は危険なので、JSONが有効であることを確認してください）。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);
— ルカ・マッテイス
ソース
1
側面思考の場合は+1。私はおそらくこの方法を使いたくないと思いますが、それは漠然と実行可能なオプションです！
— nickf 2009年
9
@nickf 代わりにjsfiddle.net/EAXmYをeval使用しJSON.parseないようにすることができます
— Simon
12

任意の属性は無効ですが、最新のブラウザでは完全に信頼できます。JavaScriptを介してプロパティを設定する場合は、検証についても心配する必要はありません。

別の方法は、JavaScriptで属性を設定することです。jQueryには、その目的のためだけに優れたユーティリティメソッドが用意されています。

— エラン・ガルペリン
ソース
3
data-代わりに属性を使用しないのはなぜですか？
— Flimm 2017年
10

可能なほとんどすべてのブラウザーで機能するハックは、次のようなオープンクラスを使用することです。 <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

これは純粋主義者にとってそれほどエレガントではありませんが、広くサポートされ、標準に準拠しており、操作が非常に簡単です。それは本当に最善の方法のようです。あなたの場合はserialize、変更、コピータグを、または他のほとんど何でもする、dataなど、付属のコピーままになります

唯一の問題は、シリアライズ不可能なオブジェクトをそのように格納できないことです。本当に巨大なものをそこに配置すると、制限が生じる可能性があります。

2番目の方法は、次のような偽の属性を使用することです。<a articleid='5' href="link/for/non-js-users.html">

これはよりエレガントですが、標準に違反しており、サポートについて100％確信が持てません。多くのブラウザはそれを完全にサポートしています。IE6はJSそれへのアクセスをサポートしていると思いますがCSS selectors（ここでは重要ではありません）、一部のブラウザは完全に混乱するので、確認する必要があります。

シリアライズやデシリアライズのようなおもしろいことをすると、さらに危険になります。

ids純粋なJSハッシュへの使用は、タグをコピーしようとする場合を除いて、ほとんど機能します。がある場合tag <a href="..." id="link0">、それを標準のJS方法でコピーしてから、data一方のコピーにのみ添付して変更しようとすると、もう一方のコピーが変更されます。

をコピーしない場合tag、または読み取り専用データを使用する場合は問題ありません。をコピーtagして変更した場合は、手動で処理する必要があります。

— 解凍
ソース
クラスに弁を保管するのはすばらしい
— サラバナンラジャ
10

jqueryを使用して、

保存する： $('#element_id').data('extra_tag', 'extra_info');

取得する： $('#element_id').data('extra_tag');

— user2458978
ソース
6

現在jQueryを使用していることは承知していますが、onclickハンドラーをインラインで定義した場合はどうでしょうか。それからあなたはすることができます：

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>
— Tvanfosson
ソース
6

非表示の入力タグを使用できます。私はこれでw3.orgで検証エラーを受け取りません：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

jQueryを使用すると、（テストされていない）などの記事IDを取得できます。

$('.article input[name=articleid]').val();

ただし、それがオプションである場合は、HTML5をお勧めします。

— 門
ソース
13
style="display: none"非表示の入力フィールドには必要ないと思います。
— phylae
1
すべてのHTMLバージョンで完全に有効な良いアプローチ。私は、すべてのユーザーが完全にHTML5に準拠したブラウザーを使用することを前提に、コーディングをできるだけ控えています。また、display：noneは非表示フィールドには必要ありません。
— andreszs 2014
非常に素晴らしい。これは、データ属性が有効なオプションではないXHTMLで見つけた最良のソリューションです。IMOそれは意図しない方法でタグ/属性を乱用しません、それはほとんど「匂い」がまったくありません。そして、他の人が言ったように：display：noneは実際には必要ありません。
— アラマン、
4

任意のデータを追加する代わりに、そこに既に存在する意味のあるデータを利用しないのはなぜですか？

つまり、を使用すると<a href="https://stackoverflow.com/articles/5/page-title" class="article-link">、プログラムでページ上のすべての記事のリンク（クラス名を介して）と記事のID（正規表現を/articles\/(\d+)/と照合）を取得できますthis.href。

2
これに関する問題は、それも実際には拡張可能ではないということです
— ehdv
3

したがって、4つの選択肢があるはずです。

  1. データをid属性に入れます。
  2. データを任意の属性に配置します
  3. データをクラス属性に置く
  4. データを別のタグに配置する

http://www.shanison.com/?p=321

— シャニソン
ソース
@ h4ck3rm1k3 ... id属性には含まれません。ドキュメント全体で一意である必要があり、必要に応じてサイドバーなどで繰り返す必要があります...古い質問ですが、まだ有効です
— miguel-svq
2

「rel」属性の使用を推奨します。XHTMLは検証し、属性自体はほとんど使用されず、データは効率的に取得されます。

— デモンコリュー
ソース
そのIDを実行できないため、リンクのnofollow属性が壊れる
— Carter Cole
2

これは良いアドバイスです。@Prestaulに感謝

jQueryをすでに使用している場合は、jQueryを使用してdom要素に任意のデータを格納するための推奨方法である「データ」メソッドを利用する必要があります。

非常に真実ですが、任意のデータを古いHTMLに保存したい場合はどうでしょうか。ここにさらに別の選択肢があります...

<input type="hidden" name="whatever" value="foobar"/>

非表示の入力要素の名前と値の属性にデータを配置します。これは、サーバーがHTML（PHPスクリプトなど）を生成していて、JavaScriptコードが後でこの情報を使用する場合に役立ちます。

確かに、最もクリーンではありませんが、それは代替手段です。すべてのブラウザと互換性があり、有効なXHTMLです。あなたは必要がありませカスタム属性を使用し、またそれはすべてのブラウザで動作しない可能性がありますよう、あなたは本当に、「データ- 」プレフィックスと属性を使用する必要があります。さらに、ドキュメントはW3C検証に合格しません。

— BMiner
ソース
正確にはわからないが、「厳密な」Doctypeでカスタム属性を使用すると、一部のブラウザは文句を言うかもしれません。いずれにせよ、それは有効なXHTMLではありません。
— BMiner
2

ランダム要素（<span data-randomname="Data goes here..."></span>）の独自に作成した属性のデータ接頭辞を使用できますが、これはHTML5でのみ有効です。したがって、ブラウザは有効性について文句を言うかもしれません。

<span style="display: none;">Data goes here...</span>タグを使用することもできます。ただし、この方法では属性関数を使用できません。また、cssとjsがオフになっている場合、これも実際には適切な解決策ではありません。

しかし、私が個人的に好むのは次のとおりです。

<input type="hidden" title="Your key..." value="Your value..." />

入力はすべての場合に非表示になり、属性は完全に有効に<form>なり、名前がないため、タグ内にある場合は送信されません。とりわけ、属性は本当に覚えやすく、コードは見栄えがよく、理解しやすいように見えます。その中にID属性を入れることもできるので、JavaScriptでも簡単にアクセスでき、でキーと値のペアにアクセスできますinput.title; input.value。

— イエティ
ソース
私はあなたがHTMLテーブルと選択を十分に操作しなかったと確信しています。作業を節約するために、data-属性をより頻繁に使用します。
1
実際には「data-」属性をよく使用します。しかし、それはあなたの要件が何であるかに依存します。たとえば、<input />では任意のキーを使用できますが、 'data-'の場合、これは非英数字以外の小文字の文字列に制限されます。
— イエティ2015
1

1つの可能性は次のとおりです。

  • すべての拡張/任意データを保持する新しいdivを作成します
  • このdivが非表示になるように何かを実行します（CSSとdivのクラス属性など）。
  • この非表示のdiv内の[X] HTMLタグ内に拡張/任意のデータを（たとえば、テーブルのセル内のテキストとして、または他の好きなものとして）配置します
— ChrisW
ソース
1

別のアプローチは、次の構文を使用して、キーと値のペアを単純なクラスとして保存することです。

<div id="my_div" class="foo:'bar'">...</div>

これは有効であり、jQueryセレクターまたはカスタムメイドの関数を使用して簡単に取得できます。

— ラファエル
ソース
0

以前の雇用主では、フォーム要素に関する情報を保持するために常にカスタムHTMLタグを使用していました。キャッチ：ユーザーがIEの使用を余儀なくされていることを知っていました。

当時はFireFoxではうまく機能しませんでした。FireFoxがこれを変更したかどうかはわかりませんが、HTML要素に独自の属性を追加すると、リーダーのブラウザーでサポートされる場合とサポートされない場合があります。

読者が使用しているブラウザー（つまり、企業の内部Webアプレット）を制御できる場合は、ぜひお試しください。何が痛いでしょう？

— ジェリー
ソース
0

これは私があなたのページをajaxする方法です...それはかなり簡単な方法です...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

これがどのように機能するかというと、基本的には 'ajx'クラスを持つすべてのURLを調べ、キーワードを置き換えて＃記号を追加します... jsがオフの場合、URLは通常どおりに動作します...すべて "アプリ」（サイトの各セクション）には独自のキーワードがあります...したがって、ページを追加するには、上のjs配列に追加するだけです...

たとえば、現在の設定は次のように設定されています。

 var objApps= ['ads','user'];

したがって、次のようなURLがある場合：

www.domain.com/ads/3923/bla/dada/bla

jsスクリプトは/ ads /の部分を置き換えるため、私のURLは最終的に

www.domain.com/ads/#p=3923/bla/dada/bla

次に、jquery bbqプラグインを使用して、それに応じてページをロードします...

http://benalman.com/projects/jquery-bbq-plugin/

— ジェイソン
ソース
0

メタデータプラグインは、jQueryで簡単に取得して使用できるように、htmlタグで任意のデータを保存する問題の優れた解決策であることがわかりました。

重要：実際に含めるファイルは5 kbで37ではありません kbでは（ダウンロードパッケージ全体のサイズです）。

これは、Googleアナリティクストラッキングイベントの生成時に使用する値を保存するために使用される例です（注：data.labelとdata.valueはたまたまオプションのパラメーターです）

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>
— バイオフラクタル
ソース
0

HTMLでは、次のように属性名の前にプレフィックス 'data-'を付けてカスタム属性を保存できます

<p data-animal='dog'>This animal is a dog.</p>。小切手ドキュメントを

このプロパティを使用して、jQueryを使用して動的に属性を設定および取得できます。次のようなapタグがある場合

<p id='animal'>This animal is a dog.</p>

次に、上記のタグに「breed」という属性を作成するには、次のように記述します。

$('#animal').attr('data-breed', 'pug');

いつでもデータを取得するには、次のように記述します。

var breedtype = $('#animal').data('breed');

— アカシュ・ゴーシュ
ソース
0

実際の作業がサーバーサイドで行われているのに、出力のhtmlタグにカスタム情報が必要なのはなぜですか。サーバーで知る必要があるのは、カスタム情報を含む構造のリストの種類へのインデックスです。情報を間違った場所に保存しようとしていると思います。

残念ながら、多くの場合、正しい解決策は適切な解決策ではないことを認識します。その場合は、追加情報を保持するためにJavaScriptを生成することを強くお勧めします。

何年も経って：

この質問はdata-...、html 5の登場により属性が有効なオプションになる約3年前に投稿されたため、真実は変わり、私が出した元の回答はもはや関係ありません。ここで、代わりにデータ属性を使用することをお勧めします。

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

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>
— クリス
ソース
では、どのようにしてデータをJavaScriptに渡すことになっていますか？
— nickf 2009年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.