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

2018年09月15日 2019年03月9日

JavaScript

Facebook

Hatena

Pocket

Twitter

getAttribute／setAttributeとは？
getAttribute
setAttribute
getAttribute／setAttributeで属性値を取得・設定してみる
まとめ

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

jQueryの勉強を初めたのが去年（2017年）の3月くらいですので、約1年半をjQueryの勉強に費やしています。jQueryを触り始めた当初はまったくわかりませんでしたが、続けることで頭は憶えていくものなのだなーと実感しています。

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

元々JavaScriptを勉強するためにjQueryを始めましたのですが、jQueryが楽しくて、ついのめり込んでしまいました…。

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

本記事の内容

属性値を取得・設定するgetAttribute／setAttributeについて知る
getAttribute／setAttributeを使って属性値を取得・設定してみる

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

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は、指定した要素に属性の設定や属性値の変更をすることができる構文になります。要素が指定した属性を持っていない場合は追加、持っている場合は値を変更する処理をします。

下記の要素に対して、setAttributeでnameの属性値を変更するとします。

<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 aajLrq by ryoy (@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});