【JavaScript】属性値の取得・設定【getAttribute・setAttribute】2021.07.23JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptで属性値を取得・設定する方法をご紹介しています。JavaScriptで属性値の取得や設定はどうすればいいの?上記の疑問にお答えします。getAttribute/setAttributeとは?getは取得、setは設定、attributeは属性という意味です。そのまま解釈すると、getAttributeは属性を取得するメソッド、setAttributeは属性を設定するメソッドになります。jQueryで属性の操作をする場合はattr()を使用しますが、それと同様の処理になります。詳しく見ていきましょう。getAttributegetAttributeは、指定した要素の属性を取得することができます。要素というのはHTMLで記述した一般的なタグを指します(article、section、header、footer、div等)。下記のようにelemというid属性を持つ要素がname属性を持っていたとします。name="test">getAttributeで要素の属性を取得するには、下記のように記述します。document.getElementById('elem')element.getAttribute('name');結果をコンソールに出力してみましょう。「test」という文字列が表示されているはずです。まとめると、getAttributeで要素の属性値を取得する方法は下記のようになります。要素.getAttribute('属性名');setAttributesetAttributeは、指定した要素に属性の設定や属性値の変更をすることができる構文になります。要素が指定した属性を持っていない場合は追加、持っている場合は値を変更します。下記の要素に対して、setAttributeでnameの属性値を変更してみます。name="test">スクリプトは下記のようになります。document.getElementById('elem')element.setAttribute('name','test2');Chromeであれば、右クリックで「検証」を、Firefoxであれば「開発ツール」で該当のタグを見てみてください。nameの属性値が変更されているのがおわかりいただけるかと思います。要素が持っていない属性を追加する場合は、下記のようにします。document.getElementById('elem')element.setAttribute('class','el');どうでしょうか。指定した要素にclassが追加されているかと思います。setAttributeを使用することで属性の設定と変更が簡単にできますね。まとめると、setAttributeで要素の属性値を設定する方法は下記のようになります。'属性値');getAttribute/setAttributeで属性値を取得・設定してみるimg要素のsrc属性の値を取得してアラートを表示し、その後にsrc属性の値を変更するスクリプトを書いてみます。ボタンをクリックするとアラートが表示され、アラートを非表示にすると画像が切り替わる処理になります。下記がデモになります。CodePen.JS下記はデモで使用したスクリプトです。getAttributeでページ読み込み時に設定されているsrc属性の値を取得し、アラートで表示。その後、新しいsrcぞ構成の値をsetAttributeで設定しています。ボタンクリックで動作するイベントリスナーについては本記事では触れていない部分になります。後日詳しく記事にできればと思います。});まとめgetAttributeとsetAttributeの用途をまとめます。getAttributeは要素と属性を指定して属性値を取得するsetAttributeは要素と属性を指定して、属性と属性値の設定、または属性値を変更する最後にjQueryを使って、簡単な処理であればグーグル先生に頼らずにスクリプトをかけるようになりました。簡単な処理というのは、クリックやスクロールイベントの処理、エレメントの動的な追加・削除やajax等になります。jQueryの勉強を初めたのが去年(2017年)の3月くらいですので、約1年半をjQueryの勉強に費やしたことになります。jQueryを触り始めた当初はまったくわかりませんでしたが、続けることで頭は憶えていくものなのだなーと実感しているこの頃です。jQueryについてはある程度理解できるようになりましたので、そろそろ次のステージへ進むべく、最近JavaScriptの勉強をはじめました。JavaScriptを勉強するためにjQueryを始めましたのですが、jQueryが楽しくて、ついのめり込んでしまいました...。「jQueryでやっていたことをJavaScriptで実行できるようになる!」という点に重きを置き、jQueryからJavaScriptへ移行していく過程を記事にしていければと思います。お付き合い頂ければ幸いです。以上、JavaScriptで属性値の取得・設定するgetAttribute・setAttributeのご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。