【Javascript】DOM Samples /Core　NodeList/item()

A0:
A1:
A2:

<script type="text/javascript">
<!--

  function chkItem(index)
  {

    //ノードを特定
    var f0 = document.getElementById('f0')

    //特定したノード内のINPUTのノードリストを作る
    var oj = f0.getElementsByTagName('input')

    //該当index番号のitemについてnameとvalueを表示
    alert( oj.item(index).name +":"+ oj.item(index).value  )

  }

//-->
</script>

  <form name="f0" id="f0">
    A0:<input type="text" name="A0" value="A0です"><br>
    A1:<input type="text" name="A1" value="A1です"><br>
    A2:<input type="text" name="A2" value="A2です"><br>
  </form>

  <form name="f1">
    <input type="button" value="A0" onclick="chkItem(0)">
    <input type="button" value="A1" onclick="chkItem(1)">
    <input type="button" value="A2" onclick="chkItem(2)">
  </form>

        

たとえば、FORMタグの中のINPUT要素を探すときに今までのJavaScriptでは document.forms[0].elements[0]といった方法で特定することができました。 これは、0番目のフォームの0番目のエレメントという意味です。

これは便利ですがこのような方法が使えるオブジ ェクトはimages,options,appletsなど一部 のタグに限られておりHTML内のすべての要 素にアクセスできるというわけではありません。

これに対してW3C-DOMで用意された、これと同様な 仕組みですがitem(index)というメソッドですべての要素にアクセスできるという形 で用意されています。

上記サンプルはボタンを押すとINPUTオブジェクトのノードリストのうち、指定したindex番号の INPUT要素のnameとvalueを表示します。

*20041126修正 : サンプル以外のinputタグがAllaboutのページ内に存在したためindex値がずれていました。そこで、一度id=f0という名前のformオブジェクトへ絞り込む処理を追加しました(Thanx -->ふむふむさん)。