この投稿では、JavaScript でのデータ属性の使用について説明します。
JavaScript でデータ属性を使用するには?
JavaScript では、「 データ 」属性は、Web ページに表示されない追加情報を保存するために使用されます。この情報は、ユーザーの要件に応じて動的に書き込み、アクセス、読み取り、変更できます。このセクションでは、実際にデータ属性に関して説明したタスクを実行しました。
構文
< 要素データ -*= 「ある値」 >
上記の構文では次のようになります。
- 「 要素 ”はdata属性が使用されているHTML要素を表します。
- 「 データ-* 」は、プレフィックス (data-) で始まる複数 (*) データ属性、つまりデータ キーワードの後にハイフンが続くことを示します。
- 何らかの値: データ属性の値を指定します。
次に、上記の構文を使用してデータ属性を作成します。
データ属性の作成
< ディビジョンID = 「私のディビジョン」 データ - 名前 = 'アルヴィン' データ - 年 = 「40」 データ - 性別 = '男' > ディビジョン >記載されている 1 行の HTML コードにより、次のコードが作成されます。 データ名 '、' データ時代 '、 そしてその ' データジェンダー 」属性は、ID が「myDiv」である「div」要素内にあります。
作成したデータ属性を読み取ったりアクセスしたりしてみましょう。
例 1: 「dataset」プロパティを使用したデータ属性の読み取り/アクセス
この例では、「dataset」プロパティを適用して、特定またはすべてのデータ属性を読み取り/アクセスします。
まず、「」を見てください。 ボタン ” を呼び出す要素 jsFunc() ” が関連付けられている場合” クリック時 」イベントはボタンをクリックするとトリガーされます。
< ボタンオンクリック = 「jsFunc()」 > アクセスデータ属性 ボタン >ここで、「jsFunc()」の定義に進みます。
< 脚本 >関数 jsFunc ( ) {
定数 要素 = 書類。 getElementById ( 「私のディビジョン」 ) ;
コンソール。 ログ ( 要素。 データセット ) ;
}
脚本 >
上記のコード行では次のようになります。
- ” jsFunc() ” は最初に、” を適用する変数「elem」を宣言します。 document.getElementById() 」メソッドを使用して、その ID「myDiv」を介して追加された div 要素にアクセスします。
- 次に、「」を使用します。 console.log() ” を使用するメソッド データセット 」プロパティを使用して、アクセスされた div 要素のデータ属性にアクセスし、Web コンソールに表示します。
出力
F12 を押して Web コンソールを開きます。
指定されたボタンをクリックすると、コンソールに「 DOMStringMap 」には、div 要素のすべてのデータ属性が含まれます。
特定の値にアクセスする
ユーザーが特定のデータ属性にアクセスしたい場合は、次のように「dataset」プロパティでその名前を指定します。
< 脚本 >関数取得 ( ) {
定数 要素 = 書類。 getElementById ( 「私のディビジョン」 ) ;
コンソール。 ログ ( 要素。 データセット 。 名前 ) ;
}
脚本 >
このとき、「name」データ属性には「 データセット ' 財産。
出力
ボタンをクリックすると、コンソールには指定されたデータ属性の値のみが表示されていることがわかります。
例 2: 「getAttribute()」メソッドを使用したデータ属性の読み取り/アクセス
この例では、「getAttribute()」メソッドを使用してデータ属性を読み取り/アクセスします。
このシナリオには、最初の例のボタン要素も含まれています。
< ボタンオンクリック = 「jsFunc()」 > アクセスデータ属性 ボタン >「getAttribute()」メソッドの機能を見てみましょう。
< 脚本 >関数 jsFunc ( ) {
定数 要素 = 書類。 getElementById ( 「私のディビジョン」 ) ;
コンソール。 ログ ( 要素。 属性の取得 ( 「データ名」 ) ) ;
コンソール。 ログ ( 要素。 属性の取得 ( 「データ時代」 ) ) ;
コンソール。 ログ ( 要素。 属性の取得 ( 「データジェンダー」 ) ) ;
}
脚本 >
上記のコード スニペットでは次のようになります。
- 「elem」変数は「 document.getElementById() 」メソッドを使用して、ID「myDiv」を使用して追加された div 要素にアクセスします。
- 次に、「 console.log() ” メソッドは” を使用します。 get属性() 」メソッドを使用して、取得したdiv要素の指定された「data」属性値を取得し、Webコンソールに表示します。
- 残りの指定されたデータ属性にアクセスするには、同じタスクが実行されます。
注記： 「getAttribute()」メソッドは、プレフィックス「data」の後にハイフン(-)、つまり (data-) を付けたデータ属性を指定します。これは、「dataset()」プロパティの使用中には必要ありません。
出力
上記の出力では、ボタンをクリックすると、指定されたすべてのデータ属性値が表示されます。
例 3: 「dataset」プロパティを使用してデータ属性を書き込む
この例では、「dataset」プロパティを使用してデータ属性を書き込みます。
ボタン要素の内容は、現在のシナリオに従って変更されます。
< ボタンオンクリック = 「jsFunc()」 > 書き込みデータ属性 ボタン >ここで、追加した div 要素に新しい data 属性を書き込みます。
< 脚本 >関数 jsFunc ( ) {
定数 要素 = 書類。 getElementById ( 「私のディビジョン」 ) ;
要素。 データセット 。 ID = '人'
コンソール。 ログ ( 要素。 データセット ) ;
}
脚本 >
上記のコード ブロックでは次のようになります。
- ” データセット 」プロパティは、指定された文字列値を使用して新しいデータ属性名「id」を書き込みます。
- 次に、「 conolse.log() 」は、「dataset」プロパティを使用して、新しく書き込まれたデータ属性を含む「DOMStringMap」インターフェイスを Web コンソールに表示します。
出力
ここで、コンソールには、「dataset」プロパティを使用して書き込まれた新しいデータ属性「id」を含む「DOMStringMap」が表示されます。
例 4: データ属性値の更新
この例では、「dataset」プロパティを使用して、特定のデータ属性の既存の値を更新します。
ボタン要素のテキストは、指定されたシナリオに従って変更されます。
< ボタンオンクリック = 「jsFunc()」 > データ属性の更新 ボタン >次に、JavaScript セクションに進みます。
< 脚本 >関数 jsFunc ( ) {
定数 要素 = 書類。 getElementById ( 「私のディビジョン」 ) ;
要素。 データセット 。 名前 = 「ジョン」
コンソール。 ログ ( 要素。 データセット 。 名前 ) ;
}
脚本 >
上記のコード ブロックでは、指定された「name」データ属性値が「 データセット ' 財産。
出力
ボタンをクリックすると、コンソールには指定されたデータ属性の更新された値が表示されます。
例 5: データ属性の削除
この例では、「delete」キーワードを利用して特定のデータ属性を削除します。
ボタン要素のテキストは要件に従って変更されます。
< ボタンオンクリック = 「jsFunc()」 > データ属性の削除 ボタン >次に、JavaScript コード ブロックに従います。
< 脚本 >関数 jsFunc ( ) {
定数 要素 = 書類。 getElementById ( 「私のディビジョン」 ) ;
要素を削除します。 データセット 。 年 ;
コンソール。 ログ ( 要素。 データセット 。 年 ) ;
}
脚本 >
上記のコード スニペットでは、「 消去 」キーワードを「dataset」プロパティとともに使用して、アクセスされたデータ属性を削除します。
出力
コンソールに「 未定義 ボタンをクリックすると、アクセスされたデータ属性が削除されたことが明確に確認されます。
結論
JavaScriptでは、データ属性を要件に応じて読み取り、アクセス、書き込み、更新、削除などのさまざまな方法で使用できます。これらすべてのタスクは、内蔵の「 データセット ' 財産。ただし、ユーザーは「」を使用してデータ属性に 1 つずつアクセスすることもできます。 get属性() ' 方法。この投稿では、JavaScript でのデータ属性の使用について実際に説明しました。