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

下記の要素に対して、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 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 }
);