HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM getAttribute()メソッドの使い方を徹底解説

HTML DOM の getAttribute() メソッドは、特定の HTML 要素に関連付けられた属性の値を取得するために使用されるメソッドです。もし対象の要素が指定された属性を持っていない場合は、null または空文字列が返されます。

getAttribute()メソッドの構文

getAttribute() メソッドの基本構文は以下の通りです。

element.getAttribute(attributename)

ここで attributename は文字列型の必須パラメータであり、値を取得したい属性名を指定します。たとえば「href」「src」「id」などの属性名を渡すことで、その属性に設定されている値を文字列として受け取ることができます。

getAttribute()メソッドの使用例

それでは、実際に getAttribute() メソッドを使用したサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function getAttr() {
        var a = document.getElementsByTagName("a")[0].getAttribute("href");
        document.getElementById("Sample").innerHTML = a;
    }
</script>
</head>
<body>
<h1>getAttribute() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>Get the href attribute value of the above link by clicking the below button</p>
<button onclick="getAttr()">GET</button>
<p id="Sample"></p>
</body>
</html>

実行結果

このコードをブラウザで開くと、リンクとボタンが表示されたページが出力されます。

HTML DOM getAttribute()メソッドの使い方を徹底解説

ここで「GET」ボタンをクリックすると、リンクの href 属性の値が画面に表示されます。

HTML DOM getAttribute()メソッドの使い方を徹底解説

コードの解説

上記の例では、以下のような処理が行われています。

1. アンカー要素の作成

まず、href 属性に https://www.google.com を設定したアンカー（リンク）要素を作成しています。

<a href="https://www.google.com">GOOGLE</a>

2. ボタンの作成

次に、ユーザーがクリックすると getAttr() 関数を実行する「GET」ボタンを作成しています。

<button onclick="getAttr()">GET</button>

3. getAttr()関数の処理内容

getAttr() 関数では、document オブジェクトの getElementsByTagName() メソッドを使用して、HTML ドキュメント内の最初の <a> 要素を取得しています。

続いて、その要素に対して getAttribute() メソッドを呼び出し、href 属性の値を取得して変数 a に代入します。最後に、innerHTML プロパティを使って、id が「Sample」である段落にその値を表示しています。

function getAttr() {
    var a = document.getElementsByTagName("a")[0].getAttribute("href");
    document.getElementById("Sample").innerHTML = a;
}

まとめ

getAttribute() メソッドを使うことで、JavaScript から HTML 要素の任意の属性値を簡単に読み取ることができます。属性が存在しない場合の戻り値（null または空文字列）にも注意しながら、動的な Web ページの開発に活用しましょう。なお、属性値を設定・変更したい場合は setAttribute() メソッドを併用すると便利です。

  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや