【JavaScript】getAttribute()で要素の属性値を取得する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年11月29日に投稿されました。)

JavaScriptで要素に付与されている属性値を取得するにはgetAttribute()を使用します。

getAttribute()とは要素の属性値を取得するメソッドとなります。

そのため、セレクタに対して使用することでセレクタに付与されている属性値を指定して取得することができるようになります。

また、要素に任意の値を格納することができるdata属性に使用すると、データの管理ができるためとても便利です。

以上のことから、もし要素の属性値を取得したい場合にはgetAttribute()を使用しましょう。

今回はJavaScriptのgetAttribute()で要素の属性値を取得する方法について紹介していきます。

この記事はこんな方におすすめ

セレクタの属性値を指定して取得したい場合

任意のデータとして保管しておいた値を取得したい場合

getAttribute()とは

getAttribute()とは、要素の属性値を取得することができるメソッドになります。

属性とはHTMLの開始タグ内に付与されている値であり、それらの値を取得することができます。

getAttribute()の書き方

getAttribute()の書き方は下記のようになります。

セレクタの後ろにgetAttribute()と追記し、引数を1つ指定することで対象の要素の属性値を取得することができます。

getAttribute()の引数

getAttribute()の引数は下記のようになります。

  1. 属性値:(必須)
    取得したい属性名を指定する

getAttribute()は必須な引数として「属性名」を指定します。

getAttribute()の返り値

getAttribute()の返り値は指定した属性名の値の文字列となります。

getAttribute()で要素の属性値を取得するサンプルコード

getAttribute()で要素の属性値を取得するサンプルコードをご紹介します。

ここでは下記の3つのパターンでgetAttribute()を使用します。

  1. 指定した属性が存在する場合
  2. 指定した属性が存在しない場合
  3. 指定した属性が重複して存在する場合

指定した属性が存在する場合

要素に指定した属性が存在する場合にgetAttribute()を使用すると、指定した属性名の値を取得します。

● index.html

● main.js

実行結果

getAttribute()で存在する要素の属性を取得して属性値を取得した結果

getAttribute()で存在する要素の属性値を取得しています。

そのため、取得ボタンをクリックするとclassの属性値である「div-area」とstyleの属性値である「border: 1px solid black;」が表示されています。

指定した属性が存在しない場合

要素に指定した属性が存在しない場合にgetAttribute()を使用すると、「null」が返されます。

● index.html

● main.js

実行結果

getAttribute()で存在しない要素の属性を取得して属性値を取得した結果

getAttribute()で存在しない要素の属性値を取得しています。

そのため、取得ボタンをクリックすると「null」が表示されています。

Sossy

もし、「null」を取得することを回避したい場合はhasAttribute()で確認したり、
三項演算子を使用すると良いですよ。

指定した属性が重複して存在する場合

要素に指定した属性が重複して存在する場合にgetAttribute()を使用すると、最初にマッチした属性値が返されます。

● index.html

● main.js

実行結果

getAttribute()で重複して存在する要素の属性を取得して属性値を取得した結果

getAttribute()で重複する要素の属性値を取得しています。

そのため、取得ボタンをクリックすると最初の「class」の属性値である「div-area1」が表示されています。

getAttribute()で要素の属性値を一括で取得する場合

getAttribute()で要素の属性値を一括で取得するには、繰り返し処理と組み合わせて使用します。

取得したい属性値を配列で指定し、繰り返し処理にgetAttribute()を使用することで、配列内の属性値を一括で取得することができます。

● index.html

● main.js

実行結果

getAttribute()で要素の属性値を一括で取得した結果

getAttribute()で要素の属性値を一括で取得しています。

今回はforEach()を使用して、取得したい属性の繰り返し処理を行い、それらをgetAttribute()の引数に指定しています。

そのため、取得ボタンをクリックすると要素に付与される全ての属性値が表示されています。

もし、forEach()について詳しく知りた場合は下記の記事をご参考ください。

getAttribute()を使用した実際のケース

getAttribute()を使用した実際のケースについてご紹介します。

getAttribute()は「data-*属性」を取得することでさまざまなケースで役立ちます。

そもそも「data-*属性」とはカスタムデータ属性といい、HTMLの要素に任意の名前をつけたデータを持たせることができます。

そのため、getAttribute()で「data-*」属性の値を取得することで要素内に任意のデータを保持し、その値を自分のタイミングで取得することが可能になります。

要素を動的に生成する場合

getAttribute()で「data-*属性」を取得することで要素を動的に生成することができます。

● index.html

● style.css

● main.js

実行結果

getAttribute()で「data-*」属性の値を取得して要素を動的に生成した結果

getAttribute()で要素を動的に生成しています。

今回はcreateElement()を使用してHTML要素を作成しています。

そのため、要素作成ボタンをクリックすると「data-content」の属性値がテキストとなるHTML要素が作成されています。

もし、createElement()について詳しく知りたい場合は下記の記事をご参考ください。

要素のスタイルを動的に変更する場合

getAttribute()で「data-*属性」を取得することで要素のスタイルを動的に変更することができます。

● index.html

● style.css

● main.js

実行結果

getAttribute()で「data-*」属性の値を取得して要素のスタイルを動的に変更した結果

getAttribute()で要素のスタイルを動的に変更しています。

そのため、「スタイル変更-1」ボタンをクリックすると、要素の背景が変化し、「スタイル変更-2」ボタンをクリックすると、要素の文字色が変化しています。

条件処理を動的に変更する場合

getAttribute()で「data-*属性」を取得することで条件処理を動的に変更することができます。

● index.html

● main.js

実行結果

getAttribute()で「data-*」属性の値を取得して条件処理を動的に変更した結果

getAttribute()で条件処理を動的に変更しています。

そのため、「切替」ボタンをクリックして「ダイヤログ」ボタンをクリックすると、アラートが発生しています。

そして、再び「切替」ボタンをクリックして「ダイヤログ」ボタンをクリックすると、確認ダイヤログが発生します。

jQueryで要素の属性値を取得する場合

jQueryで要素の属性値を取得する場合には、attr()を使用します。

attr()とはセレクタの属性値を取得することができるメソッドになります。

そのため、今回ご紹介しているgetAttribute()と同様な処理となります。

● index.html

● main.js

実行結果

jQueryのattr()で要素の属性値を取得した結果

attr()で要素の属性値を取得しています。

そのため、「取得」ボタンをクリックすると「id」の属性値である「div1」と、「style」属性値である「font-weight:bold」が表示されています。

要素の属性を利用したメソッドの一覧

要素の属性値を利用したメソッドの一覧についてご紹介します。

setAttribute()

setAttribute()とは、要素の属性に値をセットすることができるメソッドになります。

そのため、取得する要素の属性に値をセットしたり、初期でセットされている値を更新することができます。

● index.html

● main.js

実行結果

setAttribute()で要素の属性に値を設定した結果

setAttribute()で要素の属性に値を設定しています。

そのため、「設定」ボタンをクリックすると、「id」属性に「obj-div1」、「style」属性に「font-weight:bold」が設定されて表示されています。

また、「class」属性が「obj」から「obj-1」に更新されて表示されています。

もし、setAttribute()について詳しく知りたい場合は下記の記事をご参考ください。

hasAttribute()

hasAttribute()とは、要素に指定した属性が持っているかどうか確認することができるメソッドになります。

そのため、要素の属性値を取得する前に確認することができます。

● index.html

● main.js

実行結果

hasAttribute()で要素に指定した属性が持っているかどうか確認した結果

hasAttribute()で要素に指定した属性が持っているかどうか確認しています。

そのため「確認」ボタンをクリックすると、「class」属性は存在するため「obj」が表示されています。

また、「id」属性は存在しないため「default-id」が表示されています。

属性名と属性値をオブジェクトデータで取得する場合

属性名と属性値をオブジェクトデータで取得するにはattributesを使用します。

attributesとは、対象要素に登録されたすべての属性情報が格納されているプロパティとなります。

そのため、セレクタの後に指定することで、対象要素の属性をオブジェクトデータとして取得することが可能になります。

● index.html

● main.js

実行結果

attributesプロパティで属性名と属性値をオブジェクトデータで取得した結果

attributesで属性の名前と値をオブジェクトデータで取得しています。

そのため「取得」ボタンをクリックすると、要素に付与されている属性名と属性値がオブジェクトで表示されています。

要素の属性名を取得する場合

要素の属性名を取得するにはgetAttributeNames()を使用します。

getAttributeNames()とは要素の属性名を一覧で取得することができるメソッドになります。

そのため、要素にどのような属性が付与されているのか確認することができます。

● index.html

● main.js

実行結果

getAttributeNames()で要素の属性名を取得した結果

getAttributeNames()で要素の属性名を取得しています。

そのため「取得」ボタンをクリックすると、属性名である「class」、「id」、「name」、「style」、「lang」が表示されています。

まとめ

⚫︎ getAttribute()とは要素に付与されている属性値を取得することができるメソッドである。

⚫︎ 要素に指定した属性が存在する場合にgetAttribute()を使用すると、指定した属性値を返す。

⚫︎ 要素に指定した属性が存在しない場合にgetAttribute()を使用すると、「null」を返す。。

⚫︎ 要素に指定した属性が重複して存在する場合にgetAttribute()を使用すると、最初にマッチした属性値を返す。

⚫︎getAttribute()で要素の属性値を一括で取得するには繰り返し処理と組み合わせて使用する。

⚫︎ getAttribute()は「data-*」属性を取得することで下記のような使い方ができる
・要素を動的に生成する
・要素のスタイルを動的に変更する
・条件処理を動的に変更する

⚫︎ jQueryで要素の属性値を取得するにはattr()を使用する。

⚫︎ 取得する要素の属性に値をセットしたり更新したりするにはsetAttribute()を使用する。

⚫︎ 取得する要素の属性を確認するにはhasAttribute()を使用する。

⚫︎ 要素の属性情報をオブジェクトで取得するにはattributesプロパティを使用する。

⚫︎ 要素の属性名に値を取得するにはgetAttributeNames()を使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA