JavaScript getAttribute()メソッド

概要: このチュートリアルでは、JavaScriptのgetAttribute()メソッドを使用して、要素の指定された属性の値を取得する方法を学習します。

JavaScript getAttribute()メソッドの紹介

指定された要素の属性の値を取得するには、その要素のgetAttribute()メソッドを呼び出します。

let value = element.getAttribute(name);Code language: JavaScript (javascript)

パラメータ

getAttribute()は、値を返す属性の名前を指定する引数を受け取ります。

戻り値

属性が要素に存在する場合は、getAttribute()は属性の値を表す文字列を返します。属性が存在しない場合は、getAttribute()はnullを返します。

hasAttribute()メソッドを使用して、値を取得する前に属性が要素に存在するかどうかを確認できます。

JavaScript getAttribute()メソッドの例

次の例を考えてみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS getAttribute() Demo</title>
</head>
<body>

    <a href="https://javascripttutorial.dokyumento.jp" 
        target="_blank" 
        id="js">JavaScript Tutorial
    </a>

    <script>
        let link = document.querySelector('#js');
        if (link) {
            let target = link.getAttribute('target');
            console.log(target);
        }
    </script>
</body>
</html>
Code language: HTML, XML (xml)

出力

_blankCode language: plaintext (plaintext)

動作方法

まず、querySelector()メソッドを使用して、idがjsのリンク要素を選択します。
次に、選択したリンク要素のgetAttribute()を呼び出して、リンクのtarget属性を取得します。
最後に、コンソールウィンドウにtargetの値を表示します。

次の例では、getAttribute()メソッドを使用して、idがjsのリンク要素のtitle属性の値を取得しています。

let link = document.querySelector('#js');
if (link) {
    let title = link.getAttribute('title');
    console.log(title);
}Code language: JavaScript (javascript)

出力

nullCode language: plaintext (plaintext)

まとめ

要素のgetAttribute()メソッドを呼び出すことで、指定された要素の属性の値を取得します。
属性が存在しない場合、getAttribute()はnullを返します。

クイズ

このチュートリアルは役に立ちましたか？