【JavaScript】属性値の取得・設定【getAttribute・setAttribute】

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで属性値を取得・設定する方法をご紹介しています。

JavaScriptで属性値の取得や設定はどうすればいいの?

上記の疑問にお答えします。

では、解説していきます。

getAttribute/setAttributeとは?

getは取得、setは設定、attributeは属性という意味です。そのまま解釈すると、getAttributeは属性を取得するメソッド、setAttributeは属性を設定するメソッドになります。

jQueryで属性の操作をする場合はattr()を使用しますが、それと同様の処理になります。

詳しく見ていきましょう。

getAttribute

getAttributeは、指定した要素の属性を取得することができます。要素というのはHTMLで記述した一般的なタグを指します(article、section、header、footer、div等)。

例えば、下記のようにelemというid属性を持つ要素がname属性を持っていたとします。

<input id="elem" name="test">

getAttributeで要素の属性を取得するには、下記のように記述します。

let element = document.getElementById('elem')
element.getAttribute('name');

結果をコンソールに出力してみましょう。「test」という文字列が表示されているはずです。

まとめると、getAttributeで要素の属性値を取得する方法は下記のようになります。

要素.getAttribute('属性名');

setAttribute

setAttributeは、指定した要素に属性の設定や属性値の変更をすることができる構文になります。要素が指定した属性を持っていない場合は追加、持っている場合は値を変更します。

下記の要素に対して、setAttributenameの属性値を変更してみます。

<input id="elem" name="test">

スクリプトは下記のようになります。

let element = document.getElementById('elem')
element.setAttribute('name','test2');

Chromeであれば、右クリックで「検証」を、Firefoxであれば「開発ツール」で該当のタグを見てみてください。nameの属性値が変更されているのがおわかりいただけるかと思います。

もし、要素が持っていない属性を追加する場合は、下記のようにします。

let element = document.getElementById('elem')
element.setAttribute('class','el');

どうでしょうか。指定した要素にclassが追加されているかと思います。setAttributeを使用することで属性の設定と変更が簡単にできますね。

まとめると、setAttributeで要素の属性値を設定する方法は下記のようになります。

要素.setAttribute('属性名', '属性値');

getAttribute/setAttributeで属性値を取得・設定してみる

img要素のsrc属性の値を取得してアラートを表示し、その後にsrc属性の値を変更するスクリプトを書いてみます。ボタンをクリックするとアラートが表示され、アラートを非表示にすると画像が切り替わる処理になります。

下記がデモになります。

DEMO

See the Pen 1944 by ryohei (@intotheprogram) on CodePen.

JS

下記はデモで使用したスクリプトです。getAttributeでページ読み込み時に設定されているsrc属性の値を取得し、アラートで表示。その後、新しいsrcぞ構成の値をsetAttributeで設定しています。ボタンクリックで動作するイベントリスナーについては本記事では触れていない部分になります。後日詳しく記事にできればと思います。

let btn = document.getElementsByTagName("button")[0];

btn.addEventListener(
"click",
 ()=> {
        let elem = document.getElementById("image");
        let imgSrc = "https://into-the-program.com/uploads/modal-window.jpg";
        alert(elem.getAttribute("src"));
        elem.setAttribute("src", imgSrc);
    },
    { once: true }
);

まとめ

getAttributesetAttributeの用途をまとめます。

  • getAttributeは要素と属性を指定して属性値を取得する
  • setAttributeは要素と属性を指定して、属性と属性値の設定、または属性値を変更する

最後に

jQueryを使って、簡単な処理であればグーグル先生に頼らずにスクリプトをかけるようになりました。簡単な処理というのは、クリックやスクロールイベントの処理、エレメントの動的な追加・削除やajax等になります。

jQueryの勉強を初めたのが去年(2017年)の3月くらいですので、約1年半をjQueryの勉強に費やしたことになります。

jQueryを触り始めた当初はまったくわかりませんでしたが、続けることで頭は憶えていくものなのだなーと実感しているこの頃です。

jQueryについてはある程度理解できるようになりましたので、そろそろ次のステージへ進むべく、最近JavaScriptの勉強をはじめました。元々JavaScriptを勉強するためにjQueryを始めましたのですが、jQueryが楽しくて、ついのめり込んでしまいました...。

しばらくは「jQueryでやっていたことをJavaScriptで実行できるようになる!」という点に重きを置き、jQueryからJavaScriptへ移行していく過程を記事にしていければと思います。お付き合い頂ければ幸いです。

以上、JavaScriptで属性値の取得・設定するgetAttribute・setAttributeのご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍