HTML DOMのitem()メソッドとは？使い方とサンプルコードをわかりやすく解説
HTML DOMのitem()メソッドは、ノードリスト（NodeList）オブジェクトから指定した位置のノードを取得して返すメソッドです。
ポイント： item()メソッドは、ノードリストオブジェクトに対してインデックス値を指定し、該当するノードを取り出すために使用します。これは、ノードリストに「[index]」という形でインデックス値を渡してノードを取得するのと全く同じ動作になります。
構文
item()メソッドの基本的な構文は以下の通りです。引数には0から始まるインデックス番号を指定します。
nodeListObject.item(index)
サンプルコード
ここでは、item()メソッドを使った具体的な使用例を紹介します。メニュー項目をクリックすると、クリックされた項目名が表示されるシンプルな注文フォームです。
<!DOCTYPE html>
<html>
<head>
<title>item()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>item( )</legend>
<h2>メニュー</h2>
<ul>
<li onclick="getOrder(0)">マカロニチーズ</li>
<li onclick="getOrder(1)">ピザ</li>
<li onclick="getOrder(2)">ハンバーガー</li>
</ul>
<div id="divDisplay">メニュー項目をクリックして注文してください</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var menuSelect = document.getElementsByTagName("li");
function getOrder(index) {
divDisplay.textContent = '注文内容: '+(menuSelect.item(index)).textContent;
}
</script>
</body>
</html>コードの解説
このサンプルでは、document.getElementsByTagName("li")によってすべての
getOrder(index)関数が呼び出され、menuSelect.item(index)によってクリックされた位置の実行結果
上記のコードを実行すると、以下のような画面が表示されます。
<li>要素をクリックする前の表示：
<li>要素をクリックした後の表示：
このように、item()メソッドを使えば、ノードリスト内の任意の要素にインデックスを指定して簡単にアクセスすることができます。
-
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()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや