HTML要素.getAttribute()対応: DOM Level 1（1998）

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

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

<a id="link" href="https://example.com" target="_blank" data-category="external">リンク</a>
<img id="photo" src="/img/photo.jpg" alt="写真" width="300">

var link = document.querySelector("#link");

console.log(link.getAttribute("href"));          // 『https://example.com』と出力されます。
console.log(link.getAttribute("target"));         // 『_blank』と出力されます。
console.log(link.getAttribute("data-category"));  // 『external』と出力されます。

var img = document.querySelector("#photo");
console.log(img.getAttribute("alt"));    // 『写真』と出力されます。
console.log(img.getAttribute("width"));  // 『300』と出力されます。

// 存在しない属性
console.log(link.getAttribute("title")); // 『null』が返されます。

上記のコードを実行すると、コンソールには以下が出力されます。

"https://example.com"    // href属性の値
"_blank"                 // target属性の値
"external"               // data-category属性の値
"写真"                   // alt属性の値
"300"                    // width属性の値。文字列として返されます。
null                     // 存在しない属性はnull

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

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

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

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