【JavaScript】attributesで要素の属性情報をオブジェクトで取得する!

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

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

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

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

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

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




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

JavaScriptで要素に付与されている属性をオブジェクトとして取得するにはattibutesを使用します。

attributesとは要素の属性情報をオブジェクトで確認することができるプロパティになります。

そのため、セレクタに対して使用することでセレクタに付与されている属性名や属性値が一つのオブジェクトデータで取得することができるようになります。

しかし、attributesをそのまま使用すると「属性名」と「属性値」が一緒に取れてきてしまうため、別々で取得するには更に別のプロパティを使用する必要があります。

また、こちらのプロパティは属性情報を取得するのみであり、「設定」や「更新」はできないため注意してください。

今回はJavaScriptのattributesで要素の属性情報をオブジェクトで取得する方法について紹介していきます。

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

セレクタの属性情報を取得したい場合

attributesとは

attributesとは、要素の属性のデータが格納されているプロパティになります。

各要素にはattributesプロパティが付与されているため、そこのプロパティを指定することで、対象要素の属性情報を確認することができます。

attributesの書き方

attributesの書き方は下記のようになります。

セレクタの後ろにattributesと追記することで対象要素の属性名と属性値を取得することができます。

attributesの値

attributesの返り値指定した要素の「属性名」(キー)と「属性値」(値)のオブジェクト型となります。

attributesで要素の属性を取り除くサンプルコード

attributesで要素の属性を取り除くサンプルコードをご紹介します。

ここでは下記の2つのパターンでattributesを使用します。

  1. 要素に属性が存在する場合
  2. 要素に属性が存在しない場合

要素に属性が存在する場合

要素に属性が存在する場合にattributesを使用すると、要素に付与されている属性の情報がオブジェクトで返されます。

● index.html

● main.js

実行結果

要素に属性が存在する場合にattributesで要素の属性情報を取得した結果

attributesで属性が存在する要素の属性情報を取得しています。

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

要素に属性が存在しない場合

要素に指定した属性が存在しない場合にattributesを使用すると、空のオブジェクトが返されます。

● index.html

● main.js

実行結果

要素に属性が存在しない場合にattributesで要素の属性情報を取得した結果

attriobutesで属性が存在しない要素の属性情報を取得しています。

そのため、取得ボタンをクリックするとデータがないオブジェクトが表示されています。

attributesで要素の属性情報を別々で取得する方法

attributesで要素の属性情報を取得しましたが、属性情報をそのまま取得するため、プログラムの処理として使用するには使い勝手が悪いです。

そのため、ここではattributesで要素の属性情報を別々で取得する方法についてご紹介します。

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

atttributesで要素の属性名のみを取得するには、nodeNameを使用します。

nodeNameとは、attributesの中にある現在のノードの名前を文字列で取得したり設定したりするプロパティになります。

そのため、attributesで指定したキーに対してnodeNameを使用することで、属性名のみを取得することができます。

● index.html

● style.css

● main.js

実行結果

atttributesのnodeValueで要素の属性名のみを取得した結果

attributesのnodeNameで要素の属性名のみを取得しています。

今回はfor()を使用して、データ数分の繰り返し処理を行い、それらをnodeNameで指定しています。

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

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

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

atttributesで要素の属性名のみを取得するには、nodeValueを使用します。

nodeValueとは、attributesの中にある現在のノードの値を取得したり設定したりするプロパティになります。

そのため、attributesで指定したキーに対してnodeValueを使用することで、属性値のみを取得することができます。

● index.html

● style.css

● main.js

実行結果

atttributesのvalueで要素の属性値のみを取得した結果

attributesのvalueで要素の属性値のみを取得しています。

今回はwhiile()を使用して、データがあるだけ繰り返し処理を行い、それらをvalueで指定しています。

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

attributesを使用した実際のケース

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

例えば、attributesを使用して作成した要素に属性が付与されているかどうかを確認するコードを作成します。

● index.html

● style.css

● main.js

実行結果

attributesを使用して作成した要素に属性が付与されているかを確認するコードを作成した結果

attriobutes()で作成した要素に属性が付与されているかどうかを確認しています。

また、createElement()で要素を作成し、Math.random()で属性を付与するかどうかを判断しています。

そのため、「作成」ボタンで要素を作成した後に「診断」ボタンをクリックすると、作成された要素に付与されている属性数が表示されています。

もし、今回使用したcreateElement()やMath.random()について詳しく知りたい場合は下記の記事をご参考ください。

● createElement()

● Math.random()

要素の属性情報を取得する方法の一覧

JavaScriptではattributes以外にも要素の属性情報を取得することができる方法が存在します。

そのため、ここでは要素の属性を取得する方法の一覧についてご紹介します。

getAttribute()

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

そのため、要素にgetAttribute()を使用することで属性の値を取得することができます。

● index.html

● main.js

実行結果

getAttribute()で要素に付与された属性の値を取得した結果

getAttribute()で要素に付与された属性の値を取得しています。

そのため、「取得」ボタンをクリックすると「class」属性の「obj」、「id」属性の「obj-div1」、「style」属性の「color: purple;」が表示されています。

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

getAttributeNode()

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

そのため、要素にgetAttribute()を使用することで属性の値を取得することができます。

● index.html

● main.js

実行結果

getAttributeNode()で要素に付与された属性のノードを取得した結果

getAttributeNode()で要素に付与された属性のノードを取得しています。

そのため、「取得」ボタンをクリックすると要素の属性ノードがそれぞれ表示されています。

getAttributeNames()

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

そのため、要素に付与されてる属性の名前を一括で取得することが可能になります。

● index.html

● main.js

実行結果

getAttributeName()で要素に付与された属性名を全て取得した結果

getAttributeName()で要素に付与された属性名を全て取得しています。

そのため、「設定」ボタンをクリックすると、要素に付与されている「class」属性、「id」属性、「style」属性が表示されています。

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

まとめ

⚫︎ attributesとは要素に付与されている属性情報をオブジェクトで返すプロパティである。

⚫︎ 要素に属性が存在する場合にattributesを使用すると、属性情報をオブジェクトで返す。

⚫︎ 要素にた属性が存在しない場合にattributesを使用すると、空のオブジェクトを返す。

⚫︎ attributesで属性名のみを取得するにはnodeNameプロパティを続けて使用する。

⚫︎ attributesで属性値のみを取得するにはvalueプロパティを続けて使用する。

⚫︎ 要素の属性を取得する方法として下記のような方法がある
・セレクタ[属性名] (セレクタの後に直接属性名を指定する)
・getAttribute()
(セレクタの指定した属性の値を取得することができるメソッド)
・getAttributeNode()
(セレクタの指定した属性ノードを取得することができるメソッド)
・getAttributeNames()
(セレクタの属性名を全て取得することができるメソッド)

コメントを残す

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

CAPTCHA