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

HTML DOM getAttributeNode()メソッドの使い方をわかりやすく解説

HTML DOM の getAttributeNode() メソッドは、指定した要素の属性ノードを Attr オブジェクトとして返すために使用されます。取得した Attr オブジェクトが持つさまざまなプロパティやメソッドを利用することで、属性の値を読み取ったり操作したりすることが可能です。

構文

getAttributeNode() メソッドの基本的な構文は以下のとおりです。

element.getAttributeNode(attributename)

引数 attributename は必須の文字列型パラメータで、取得したい属性の名前を指定します。

サンプルコード

ここで、getAttributeNode() メソッドを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function getAttrNode(){
        var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
        var val=a.value;
        document.getElementById("Sample").innerHTML = val;
    }
</script>
</head>
<body>
<h1>getAttributeNode() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>下のボタンをクリックすると、上記リンクの href 属性の値を取得します</p>
<button onclick="getAttrNode()">GET</button>
<p id="Sample"></p>
</body>
</html>

実行結果

このコードを実行すると、まず次のような画面が表示されます。

HTML DOM getAttributeNode()メソッドの使い方をわかりやすく解説

GET ボタンをクリックすると、以下のように href 属性の値が出力されます。

HTML DOM getAttributeNode()メソッドの使い方をわかりやすく解説

コードの解説

このサンプルでは、以下のような処理が行われています。

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

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

次に、ユーザーがクリックすると getAttrNode() 関数が実行される GET ボタンを配置しています。

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

getAttrNode() 関数内では、getElementsByTagName() メソッドを使って HTML ドキュメント内の最初のアンカー要素を取得し、さらにその要素に対して引数「href」を指定して getAttributeNode() メソッドを呼び出しています。

getAttributeNode() メソッドは、href 属性を表す Attr オブジェクトを返し、それが変数 a に代入されます。続いて、Attr オブジェクトの value プロパティを使って href 属性の値を取り出し、変数 val に格納します。最後に、取得した href 属性の値を innerHTML プロパティ経由で id「Sample」の段落要素に表示しています。

function getAttrNode(){
    var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
    var val=a.value;
    document.getElementById("Sample").innerHTML = val;
}

なお、単純に属性値だけが必要な場合は getAttribute() メソッドでも十分ですが、属性ノード自体（Attr オブジェクト）を扱いたい場合には getAttributeNode() メソッドが適しています。Attr オブジェクトからは value プロパティ以外にも、name プロパティで属性名を取得するなど、より詳細な属性情報へのアクセスが可能です。

  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()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや