ホームページ >ウェブフロントエンド >H5 チュートリアル >H5データセットの使い方
H5データセットの使い方
- php中世界最好的语言オリジナル
- 2018-03-14 15:15:053366ブラウズ
今回はH5データセットの使い方と、H5データセットを使用する際の注意点を紹介します。以下は実際のケースですので見てみましょう。
HTML5 標準では、通常の要素タグに data-* と同様の 属性 を埋め込んで、簡単なデータ アクセスを実現できます。数量に制限はなく、javascriptによって動的に変更することもでき、スタイル設定用のCSSセレクターもサポートしています。これにより、データ属性が特に柔軟かつ強力になります。このような属性を使用すると、より秩序正しく直感的な方法でデータを事前設定または保存できます。もちろん、任意のタグ要素に任意のカスタム属性を追加でき、その値を取得することもできますが、これほど柔軟ではありません。まず、ランダム属性の保存データを見てみましょう。
1. domノードオブジェクトのsetAttributeとgetAttributeを使用します
例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>
Document
</title>
</head>
<body>
<span id="music" mtitle="yestoday once more">昨日重现</span>
<script type="text/javascript">
var mdoc=document.getElementById('music');
alert(mdoc.getAttribute('mtitle'));
</script>
</body>
</html>このコードを実行すると、ページ上でmtitleに対応する値を取得できます。このように書くことも可能ですが、より多くの情報を事前に設定したい場合は、セマンティック属性 data-* を使用する必要があります。たとえば、先ほどの例では、この曲に関するさらに多くのデータを音楽
に挿入したい場合、次のように記述できます:
<span id="music-latch" class="musique" data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith) </span>
属性にアクセスするための最初の方法 var を引き続き使用できます。 album = document.getElementById("music-latch ").getAttribute("data-album");
ただし、複数の data-* が発生した場合、このメソッドは比較的ローエンドです。カスタムフィールドを一度に取得したい場合、データ属性がオブジェクトにパッケージ化されている場合、ループを作成する必要があり、非常に面倒です。ただし、Dataset API も利用できます。 2. データセット API を使用してデータセットにアクセスします
.dataset API を使用すると、要素のすべてのデータ フィールドをより簡単に取得し、オブジェクトを使用してアクセスとトラバースを容易にすることができます。たとえば、上記の例では、次のように実行できます。
<script type="text/javascript"> var mdoc=document.getElementById('music-latch'); var ds=mdoc.dataset; alert(ds.date+'--'+ds.album); </script>
現時点では、データにアクセスするときに、「data-」キーワードは必要ありません。を使用して直接アクセスできます。データセット名 。これは上記の方法よりも便利です。加えられた変更は要素のデータ属性にリアルタイムで反映されます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:以上がH5データセットの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。