HTML要素.getAttribute()

var value = element.getAttribute("属性名");

指定した属性の値を文字列で返します。属性が存在しない場合は『null』を返します。

sample_getAttribute.html

<a id="link" href="https://capsulecorp.example.com" target="_blank" data-character="goku">孫悟空の情報</a>
<img id="avatar" src="/img/vegeta.jpg" alt="ベジータ" width="200">
<input id="power" type="number" value="9000" min="0" max="99999">

sample_getAttribute.js

// パターン1: 標準属性の値を取得する
var link = document.getElementById("link");
console.log(link.getAttribute("href"));   // 『https://capsulecorp.example.com』と出力されます。
console.log(link.getAttribute("target")); // 『_blank』と出力されます。

// パターン2: data-*属性（カスタムデータ属性）を取得する
console.log(link.getAttribute("data-character")); // 『goku』と出力されます。

// パターン3: 画像のsrcとaltを取得する
var avatar = document.getElementById("avatar");
console.log(avatar.getAttribute("src"));   // 『/img/vegeta.jpg』と出力されます。
console.log(avatar.getAttribute("alt"));   // 『ベジータ』と出力されます。
console.log(avatar.getAttribute("width")); // 『200』と出力されます（常に文字列で返されます）。

// パターン4: 存在しない属性はnullが返される
console.log(link.getAttribute("title")); // 『null』が返されます。

// パターン5: 存在チェックをしてから使う
var title = link.getAttribute("title");
if (title !== null) {
	console.log("titleの値: " + title);
} else {
	console.log("title属性が存在しません。"); // 存在しない場合はこちらが出力されます。
}

サンプルページはこちら

『HTML要素.getAttribute()』はHTML要素の属性の値を文字列として取得するメソッドです。標準の属性（『href』『src』『class』など）はもちろん、『data-*』属性（カスタムデータ属性）の値も取得できます。

属性の値を設定したい場合は『HTML要素.setAttribute()』を使用してください。

なお、一部のプロパティ（『value』『checked』など）はHTML属性とDOMプロパティで値が異なる場合があります。フォームの現在の値を取得する場合は『getAttribute("value")』ではなく、プロパティとして『HTML要素.value』を使用する方が確実です。

『HTML要素.getAttribute()』はチュートリアル記事『id名で要素を特定してその属性を操作してみよう』で、より詳しく解説しています。良ければご覧下さい。