【JavaScript】setAttribute()で要素に属性を設定する!

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

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

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

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

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

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




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

JavaScriptで要素に属性を設定するにはsetAttribute()を使用します。

setAttribute()とは要素の属性に値を設定するメソッドとなります。

そのため、セレクタに対して使用することで対象の要素の属性を動的に設定することができます。

また、繰り返し処理と組み合わせて使用すると要素に属性を一括で設定することも可能です。

しかし、既存で設定されている属性に対してsetAttribute()を使用すると、追加ではなく更新になるため注意してください。

以上のことから、もし要素の属性に値を設定する場合にはsetAttribute()を使用しましょう。

今回はJavaScriptのsetAttribute()で要素に属性を設定する方法について紹介していきます。

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

セレクタに属性を動的に設定したい場合

属性の値を動的に行進したい場合

setAttribute()とは

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

そのため、セレクタで指定した要素の属性値を動的に設定することが可能になります。

setAttribute()の書き方

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

セレクタの後にsetAttribute()と追記し、引数を2つ指定して使用します。

setAttribute()の引数

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

  1. 属性名:(必須)
    要素に設定したい属性名を指定する
  2. 設定する値:(必須)
    属性名に設定したい値を指定する

setAttribute()は必須な引数として「属性名」と「設定する値」の2つを指定して使用します。

setAttribute()の返り値

setAttribute()の返り値はありません。

setAttribute()で要素に属性を設定するサンプルコード

setAttribute()で要素に属性を設定するサンプルコードをご紹介します。

ここでは下記の2パターンでsetAttribute()を使用します。

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

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

属性に指定した属性が存在しない場合にsetAttribute()を使用すると、対象の要素の指定した属性が設定されるようになります。

● index.html

● main.js

● 実行結果

要素に指定した属性が存在しない場合にsetAttribute()で要素の属性を設定した結果

要素に指定した属性が存在しない場合にsetArrtibute()で要素の属性に値を設定しています。

そのため「設定」ボタンをクリックすると、対象要素の「id」属性に「obj-div」が設定されています。

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

要素に指定した属性が存在する場合にsetAttribute()を使用すると既存で設定されていた値が更新されるようになります。

● index.html

● main.js

● 実行結果

要素に指定した属性が存在する場合にsetAttribute()で要素の属性を設定した結果

要素に指定した属性が存在する場合にsetArrtibute()で要素の属性に値を設定しています。

そのため「設定」ボタンをクリックすると、対象要素の「id」属性の値である「obj-div1」が「obj-div」に更新されています。

setAttribute()で要素に属性を一括で設定する方法

setAttribute()で要素に属性を一括で設定するには繰り返し処理の中でsetAttirbute()を使用します。

設定したい属性名を配列で、属性値をオブジェクトで指定し、繰り返し処理内でオブジェクトのキーにと紐づけるようにすると、属性値を一括で設定することができます。

● index.html

● main.js

● 実行結果

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

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

そのため、「設定」ボタンをクリックすると、対象要素の「class」属性、「id」属性、「lang」属性、「data-flag」属性に値が一気に設定されています。

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

setAttribute()を使用する際の注意点

要素に属性を動的に設定できるsetAttribute()ですが、使用する際に下記の2点に注意して使用する必要があります。

  1. 特殊文字がエスケープされない
  2. 属性の値が更新されてしまう

特殊文字がエスケープされない

1つ目は特殊文字がエスケープされないということです。

特殊文字とは入力するタイプによって役割が変化する文字であり、エスケープすることで期待通りの役割を果たしてくれます。

しかし、特殊文字をsetAttribute()で使用すると、エスケープされない可能性があります。

Sossy

例えば、「>」や「<」はテキストで入力すると普通の記号ですが、
HTMLとして入力すると要素の開始タグと終了タグとして認識します。

● index.html

● main.js

● 実行結果

setAttribute()で特殊文字を使用して属性に値を設定した結果

setArrtibute()で属性に「aタグ」要素の文字列を設定し、画面に表示しています。

しかし、「>」や「<」がHTMLタグと認識されているため、aタグの要素として表示されています。

そのため、特殊文字をエスケープし、HTMLエンティティを使って安全な文字列に変換するか、textContentなどを使用してテキストとして挿入する必要があります。

属性の値が更新されてしまう

2つ目は属性の値が更新されてしまうということです。

setAtribute()はclass属性やstyle属性に新しいクラスを追加する場合、既存のクラスが上書きされてしまいます。

● index.html

● main.js

● main.js

● 実行結果

setAttribute()でclass属性の値を更新した結果

setAttribute()でclass属性をセットしましたが、既存のクラス名が上書きされてしまい、CSSの紐づけが解除されています。

そのため、既存のクラス名を保持して新たなクラス名を追加する場合はclassListプロパティを使用しましょう。

setAttribute()を実際に使用したケース

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

例えば、setAttribute()を使用して入力した名前と、idによって社員か社員でないかを判別するようなコードを作成します。

● index.html

● main.js

● 実行結果(社員の場合)

setAttribute()で入力した名前と、idで社員かどうかを判別した結果(社員の場合)

● 実行結果(社員でない場合)

setAttribute()で入力した名前と、idで社員かどうかを判別した結果(社員でない場合)

setAttribute()で入力した値によって社員か社員でないかを判別しています。

今回は、入力したidをHTML要素の属性にセットし、substring()でセットしたidの3桁を取り出して、検索対象データ内に存在するかどうかを調べています。

そのため、idが検索対象データ内に存在する場合は、社員エリアに入社年込みで表示され、存在しない場合はその他のエリアに表示されています。

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

jQueryで要素の属性を設定する場合

jQueryで要素の属性を設定するにはattr()を使用します。

attr()とは要素の属性を取得したり設定したりするメソッドになります。

attr()に値を指定することで、要素の属性に指定した値を設定することが可能になります。

● index.html

● main.js

● 実行結果

jQueryのattr()で要素の指定した属性の値を設定した結果

attr()で要素の指定した属性の値を設定しています。

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

また「style」属性により、要素のスタイルが変更されています。

要素の属性値を操作するメソッドの一覧

要素の属性値を操作するメソッド以外にも存在します。

そのため、ここでは要素の属性値を操作すメソッドについて一部ご紹介します。

getAttribute()

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

属性を指定することで要素に付与されている属性の値を取得することができます。

● index.html

● main.js

● 実行結果

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

getAttribute()で要素の指定した属性の値を取得しています。

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

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

removeAttribute()

removeAttribute()とは、要素の属性を取り除くメソッドになります。

属性を指定することで要素から属性を取り除くことができます。

● index.html

● main.js

● 実行結果

removeAttribute()で要素の属性を削除した結果

removeAttribute()で要素の属性を削除しています。

そのため、「削除」ボタンをクリックすると「id」属性と「style」属性が取り除かれています。

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

toggleAttribute()

toggleAttribute()とは、要素の属性値を切り替えるメソッドになります。

属性を指定することで切り替の有無を切り替えることができます。

● index.html

● main.js

● 実行結果

toggleAttribute()で要素の属性値を切り替えた結果

toggleAttribute()で要素の属性値を切り替えています。

そのため、「切替」ボタンをクリックすると、ラジオボタンが付いたり消えたりしています。

まとめ

⚫︎ setAttribute()とは、要素の属性に値を設定することができるメソッドである。

⚫︎ setAttribute()を使用するには下記の引数を指定して使用する。
・属性名(必須)
・設定する値(必須)

⚫︎ 要素に指定した属性が存在しない場合にsetAttribute()を使用すると要素に属性がセットされる。

⚫︎ 要素に指定した属性が存在する場合にsetAttribute()を使用すると属性の値が更新される。

⚫︎ setAttribute()で属性を一括で設定するには繰り返し処理と組み合わせて使用する。

⚫︎ setAttribute()を使用する際には下記の内容に注意する
・特殊文字をエスケープすることができない
(特殊文字はエスケープされず実行される)
・属性の値が更新されてしまう
(既存の属性が上書きされてしまうため)

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

⚫︎ 要素の属性を操作するメソッドとして下記がある。
・getAttribute()
(要素で設定されている属性の値を取得するメソッド)
・removeAttribute()
(要素で設定されている属性を削除するメソッド)
・toggleAttribute()
(要素の属性の値を切り替えるメソッド)

コメントを残す

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

CAPTCHA