getAttributeで属性を取得【JavaScript】

2019年6月27日

この記事ではgetAttributeを使って属性を取得してみます。

getAttribute

getAttributeは指定した要素の属性を取得します。

getAttribute('属性の名前')という形式で使います。

使い方

下記のHTMLでgetAttributeを使って属性を取得してみましょう。

<a href="https://web-tsuku.life/" id="sample" class="btn">ウェブつく</a>

var sample = document.getElementById('sample');
var sample_id = sample.getAttribute('id');
console.log(sample_id);
// => sample

var sample_class = sample.getAttribute('class');
console.log(sample_class);
// => btn

getElementByIdを使って指定した要素に対して、getAttributeを使っています。

getAttributeで属性名を指定すると、属性の値が返ってきます。

この例では

属性名「id」と属性の値「sample」
属性名「class」と属性の値「btn」

となります。

指定した属性名がないときはnullが返る

getAttributeで指定した属性名がないときは、nullが返ります。

var sample_style = sample.getAttribute('style');
console.log(sample_style);
// => null

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。