カスタムデータにHTML5データ属性を使用する方法。

HTML5のデータ属性は、ページ要素にカスタムデータを保存する標準的な方法です。 1.データユーザーIDなどのデータから始まります。データはユーザーには見えませんが、JavaScriptからアクセスできます。 2。データセット属性を使用してデータを読み取りまたは設定すると、ハイフンがラクダに変換されます。 3.フロントエンドテンプレートのレンダリング、コンポーネント状態管理、インタラクティブコントロール、その他のシナリオに適しています。 4。メンシャルまたは大量のデータの保存の避け、競合の命名の防止、データ型の変換に注意を払うこと、およびパフォーマンスの問題を回避するための合理的な使用が含まれます。データ属性を正しく使用すると、フロントエンドのロジックがより明確かつ簡潔になります。

HTML5のデータ属性は、追加のJavaScriptオブジェクトやグローバル変数を必要とせずにHTML要素にカスタムデータを保存できる非常に実用的な機能です。明確な構造があるだけでなく、フロントエンドのロジックをより簡単にします。

データ属性とは何ですか？

データ属性は、HTML5の標準的な方法であり、ページ要素にカスタムデータを埋め込みます。このデータはユーザーには表示されませんが、JavaScriptを使用して簡単にアクセスして操作できます。

命名ルールはdata-から始まり、次に定義したプロパティ名が続きます。

 <div data-user-id = "123" data-role = "admin"> </div>

ブラウザは、これらのプロパティを正当なHTMLプロパティとして自動的に認識し、ページレンダリングには影響しません。

データプロパティを読み取り、設定する方法は？

JavaScriptのdatasetプロパティからデータにアクセスできます。

例えば：

 const element = document.queryselector（ 'div'）;
console.log（element.dataset.userid）; //出力： "123"
console.log（element.dataset.role）; //出力：「管理者」

注：属性名のハイフン（ data-user-idなど）は、camel（ userId ）に変換されます。

セットアップも非常に簡単です：

 element.dataset.userid = '456';
element.dataset.newkey = 'newValue';

これにより、DOMに対応するデータ属性が自動的に更新または追加されます。

データ属性の使用に適したシナリオはどれですか？

• フロントエンドテンプレートレンダリング：サーバーでレンダリングするとき、フロントエンドJS初期化のためにデータ属性にいくつかの初期データを配置できます。
• コンポーネントステータス管理：たとえば、ボタンのステータスなどの情報は、ロードされているかどうかにかかわらず、DOMに一時的に存在する可能性があります。
• インタラクティブコントロール：たとえば、メニュー項目をクリックした後、特定のパラメーターを渡す必要があります。特定のパラメーターは、データを使用して直接保存して読み取ることができます。
• SEOまたはアクセシビリティ支援：機密情報は推奨されませんが、この方法では、非公開のメタ情報を保存できます。

もちろん、ソースコードにさらされているため、大量のデータや機密コンテンツを保存することは避けてください。

データ属性の使用に関する注意

• 現在のページのコンテキストに関連するデータのみを使用します。これを永続的なストレージに使用しないでください。ページの更新はなくなります。

• 競合に名前を付けるときは注意してください： data-idの代わりにdata-cart-item-idなどのモジュールまたは機能的なプレフィックスを使用してみてください。

• タイプは文字列です：数字またはブール値が必要な場合は、手動で変換することを忘れないでください。

   const id = parseint（element.dataset.userid、10）;
  const isactive = element.dataset.active === 'true';

• パフォーマンスの問題はほとんどありませんが、それを悪用しないでください。多数のデータ属性を持つ何千もの要素がある場合、レンダリング速度やメモリフットプリントに影響を与える可能性があります。

基本的にそれだけです。データ属性は簡単に使用できますが、実際のプロジェクト、特にフロントエンドのコラボレーションとコンポーネント通信で優れた補助的役割を果たすことができます。

以上がカスタムデータにHTML5データ属性を使用する方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。