HTML DOM getNamedItem()メソッドとは？使い方をサンプルコード付きで解説
HTML DOMのgetNamedItem()メソッドは、NamedNodeMapオブジェクトの中から、指定した名前に一致する属性ノードを取得するために使用されます。このメソッドを呼び出す際は、必ずattributesプロパティに対して実行する必要があります。attributesプロパティはすべての属性のコレクション（NamedNodeMap）を返すため、その中からgetNamedItem()メソッドを使って特定の属性だけを取り出すことができるのです。
構文
getNamedItem()メソッドの構文は以下の通りです。
namednodemap.getNamedItem(nodename)
ここでnodenameは必須パラメータで、文字列型の値を指定します。NamedNodeMap内に存在するノード（属性）の名前を表します。
サンプルコード
getNamedItem()メソッドの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>getNamedItem() example</h1>
USERNAME: <input type="text" name="USR">
<br><br>
<button onclick="attrValue()">GET</button>
<p id="Sample"></p>
<script>
function attrValue() {
var usr = document.getElementsByTagName("input")[0];
var val = usr.attributes.getNamedItem("type").value;
document.getElementById("Sample").innerHTML = "The type attribute value for the input field is: "+val;
}
</script>
</body>
</html>
実行結果
このコードを実行すると、次のような画面が表示されます。
GETボタンをクリックすると、以下のように表示されます。
コードの解説
上記の例では、まずtype属性が「text」、name属性が「USR」に設定された入力フィールドを作成しています。
USERNAME: <input type="text" name="USR">
次に、ユーザーがクリックするとattrValue()メソッドを実行する「GET」ボタンを作成しました。
<button onclick="attrValue()">GET</button>
attrValue()メソッド内部では、まずgetElementsByTagName()メソッドを使ってinput要素を取得し、変数usrに代入しています。続いてattributesプロパティを使用すると、すべての属性がNamedNodeMapオブジェクトとしてコレクション形式で返されます。このattributesプロパティに対してgetNamedItem()メソッドを呼び出すことで、目的の特定の属性ノードのみを取得できます。
さらに、getNamedItem()で取得したノードに対してvalueプロパティを使用することで、その属性の値を取り出し、変数valに代入しています。最後に、この値をidが「Sample」の段落要素のinnerHTMLプロパティを使って画面に表示しています。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや