【Javascript】HTMLタグの属性を追加/取得する方法

今回の記事は、

  • Javascriptを使ってHTML要素の属性を操作したい
  • Javascriptを使ってHTML要素に属性を追加したい

というお悩みをお持ちの方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

setAttribute()メソッドで属性値を追加する

HTML要素には様々な属性があり、有名どころでは、classidなどが思い浮かべられるかと思います。

その他にも、form要素の入力を制御するためのdisabled属性や、画像などのパスを管理するためのsrc属性などが存在しています。

Javascriptを使ってこれらの属性を追加するには、setAttribute()メソッドを使用します。

それでは早速、setAttribute()メソッドの基本的な使い方を見ていきましょう。

setAttribute()メソッドの使い方

setAttribute()メソッドは2つの引数を取り、第1引数には「操作したい属性名」を、第2引数には「設定したい値」を指定します。

基本的な使い方

setAttribute("属性名", "設定値")

setAttribute()メソッドの実装例その1

基本的な構文を知っていただいたところで、ここからは具体的な実装例を見ていきましょう。

ここでは、チェックボックスを押すとフォームの操作ができないようにしたいと思います。

実装コード

<input type="checkbox" onClick="disableForm()" id="checkbox1">

<input id="form1">

<script>
function disableForm() {
  const checkbox1 = document.getElementById("checkbox1")
  const form1 = document.getElementById("form1")
  
  if (checkbox1.checked) {
    form1.setAttribute("disabled", true)
  } else {
    form1.removeAttribute("disabled")
  }
}
</script>

上記のコードでは以下のことを実施しています。

  • 1. チェックボックスをクリックした際にdisableForm()メソッドを動かす
  • 2. getElementById()メソッドを使って、チェックボックスとフォームのHTML要素を取得
  • 3. checkedメソッドを使って、チェックボックスがチェックされているかどうか(checked属性)を判別
  • 4. チェックボックスがチェックされていれば(checked属性がtrueであれば)フォームを無効化(disabled属性をtrueに設定)し、チェックされていなければ(checked属性がfalseであれば)フォームを有効化(removeAttributeメソッドでdisabled属性を削除)

実際に以下のボタンで動作確認をしてみてください。

動作確認用



  

setAttribute()メソッドの実装例その2

続いては、ラジオボタンで選択した値がそのままフォームへ代入されるような例を見ていきましょう。

実装コード

<label>
  <input type="radio" name="food" onClick="setFoodName('カレーライス')">
  カレーライス
</label>

<label>
  <input type="radio" name="food" onClick="setFoodName('ラーメン')">
  ラーメン
</label>

<label>
  <input type="radio" name="food" onClick="setFoodName('ハンバーグ')">
  ハンバーグ
</label>

<label>
  <input type="radio" name="food" onClick="setFoodName('チキン南蛮')">
  チキン南蛮
</label>

<p>注文する料理名を記入してください。</p>

<input id="form2">

<script>
function setFoodName(foodName) {
  const form2 = document.getElementById("form2")
  
  form2.setAttribute("value", foodName)
}
</script>

上記のコードでは以下のことを実施しています。

  • 1. チェックボックスをクリックした際にsetFoodName()メソッドを動かす
  • 2. getElementById()メソッドを使って、フォームのHTML要素を取得
  • 3. フォームのvalue属性に引数のfoodNameを設定

実際に以下のボタンで動作確認をしてみてください。

動作確認用

注文する料理名を記入してください。

getAttribute()メソッドで属性値を取得する

続いては、getAttribute()メソッドを使って、属性値を取得してみましょう。

getAttribute()メソッドの基本的な使い方

使い方はsetAttribute()メソッドよりも簡単で、取得したい属性を引数に指定するだけで大丈夫です。

基本的な使い方

getAttribute("属性名")

getAttribute()の実装例

実装コード

<input type="checkbox" name="checkbox" onClick="checkAttributes()" id="checkbox2">

<script>
function checkAttributes() {
  const checkbox = document.getElementById("checkbox2")
  
  console.log(checkbox.getAttribute("type"))
  console.log(checkbox.getAttribute("name"))
}
</script>

実装結果

=> "checkbox"
=> "checkbox"

このように、getAttribute()メソッドの引数に取得したい属性を指定することで、その値を取得することができます。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、HTMLタグの属性を追加/取得する方法について解説してきましたがいかがでしたか?

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。