JavaScript: HTML5 データ属性を活用して効率を最大化する

この記事では、JavaScript を使用して HTML5 データ属性を取得する方法について説明します。これらのデータ プロパティをプレーンな JavaScript および jQuery で使用する方法を示すために、いくつかの実践的な例を示します。

JavaScript はインターネットの中核テクノロジーの 1 つです。これはほとんどの Web サイトで使用されており、プラグインを必要とせずにすべての最新の Web ブラウザーでサポートされています。このシリーズでは、日常の JavaScript 開発に役立つヒントとテクニックについて説明します。

多くの場合、Web アプリケーションまたは Web サイトにさまざまな HTML 要素とともに追加情報を保存する必要があります。ユーザーにとっては何の意味もないかもしれませんが、その情報に基づいて行動したい場合には役立つかもしれません。

たとえば、データベースの行を含む HTML テーブルがある場合、各行に対応するデータベース ID を保存することができます。これにより、編集やその他の作業が容易になります。これはカスタム データ属性の優れた用途です。

これらのカスタム データ属性が導入される前は、開発者はこの種の情報を保存するためにクラス属性をよく使用していましたが、クラス属性は実際にはこの目的には使用されず、この方法ではコードとサイト マークアップを理解する際に問題が発生する可能性があります。

HTML5 カスタム データ属性の導入により、HTML でのカスタム データの保存と取得が非常に簡単になりました。

バニラ JavaScript を使用したデータ属性へのアクセス

このセクションでは、プレーンな JavaScript を使用して HTML5 データ属性を取得するさまざまな方法について説明します。

HTMLElement.dataset プロパティ

dataset 属性を使用すると、要素のデータ属性に簡単にアクセスできます。

次の例を考えてみましょう。

まず、各 <li> 要素に data-employee-id カスタム データ属性を定義して、従業員 ID を保存します。これは、必要に応じて後で従業員に関する詳細を取得するために使用できます。次に、各 <li> 要素に onclick イベント ハンドラーを定義します。これにより、任意の行をクリックすると、最終的に getEmpId 関数が呼び出され、 employee の値 - 対応する <li> 要素に関連付けられた id データ属性。

getEmpId 関数では、最初のパラメーターとして渡される <li> 要素の dataset 属性を使用します。 dataset プロパティは、個々のプロパティを取得するために使用できる DOMStringMap オブジェクトを返します。

dataset 属性を使用して個々のプロパティを取得する場合、いくつかの重要な点があります。 data- プレフィックスが属性名から削除されました。小文字の後にハイフンが続く場合は、大文字に変換され、ハイフンが削除されます。つまり、ダッシュ スタイル プロパティ名は camelCase オブジェクト キーに変換されます。他の役割は変わりません。

この例では、これらのルールを使用して、data-employee-id 属性が employeeId に変換されます。したがって、element.dataset.employeeId を使用して、data-employee-id 属性の値を取得できます。

これは、dataset がバニラ JavaScript で正しく動作する方法です。

getAttribute() メソッド

このセクションでは、getAttribute メソッドを使用してデータ属性の値を取得する方法について説明します。

前のセクションで説明した例を変更します。

ご覧のとおり、カスタム データ属性の取得は、HTML 要素の getAttribute メソッドを使用することで非常に簡単です。プロパティの値を取得するには、プロパティ名全体を data- プレフィックスとともに渡すだけです。

jQuery ライブラリを使用したデータ プロパティへのアクセス

このセクションでは、jQuery ライブラリを使用して HTML5 データ属性を取得する方法について説明します。

data()メソッド

jQuery data メソッドを使用すると、要素のデータ属性を簡単に取得できます。

次の例を通して、jQuery データ メソッドがどのように機能するかを理解しましょう。

ご覧のとおり、値を取得するには、キャメルケース バージョンのデータ属性名を渡すだけです。

attr() メソッド

jQuery では、attr メソッドを使用して要素の特定の属性の値を取得することもできます。

jQuery で attr メソッドを使用する方法を簡単に見てみましょう。

ご覧のとおり、attr メソッドは通常の JavaScript の getAttribute メソッドと同じように機能します。

jQuery における data メソッドと attr メソッドの違いは、data メソッドがデータ属性から取得した文字列を対応する型に内部的に変換することです。 、数値、ブール値など。

これは、jQuery を使用してデータ プロパティを簡単に取得する方法です。

今日は、JavaScript を使用して HTML5 データ属性を取得する方法について説明しました。いくつかの実践的な例を参考にして、HTML5 データ属性が一般的な JavaScript および jQuery ライブラリでどのように機能するかを学びました。

以上がJavaScript: HTML5 データ属性を活用して効率を最大化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。