HTMLCollectionオブジェクト

HTMLCollectionオブジェクトからは、HTML要素にさまざまな方法でアクセスできます。このオブジェクトを返すHTMLDocumentのプロパティには、

  • anchors … Anchorオブジェクトの配列
  • applets … Appletオブジェクトの配列
  • forms … Formオブジェクトの配列
  • images … Imageオブジェクトの配列
  • links … Linkオブジェクトの配列

のようなものがあります。これらのプロパティは、ドキュメント内のすべてのオブジェクトを返します。また、

の2つのメソッドも、その戻り値はHTMLCollectionです。

HTMLCollectionは配列のように振る舞いますが、配列ではないためArrayと同一には扱えません。 ECMAScript 2015以降ならば、Array.from()で変換することでArrayとして扱えます。

メソッド

HTMLCollectionのメソッド
メソッド 機能
item()  
namedItem()  
Methods - HTMLCollection - Web API Interfaces | MDN

要素の取得

要素の指定方法 取得方法
子ノード内での位置 
Node item( index )
 
Node elements[ index ]
idかname属性の名前 
Node namedItem( 'elementName' )
 
Node elements[ 'elementName' ]
 
Node elementName

次の2つのコードは、同一のオブジェクトを参照します。

var object = document.form1.text1;
var object = document.forms[ 'form1' ].elements[ 'text1' ];

特に後者の方法は、id属性やname属性にJavaScriptの識別子として認められていない文字が使用されているときに有用です。このような文字としては、

  • ハイフン (-)
  • コロン (:)
  • ピリオド (.)

があります。たとえば、

<form id="a-b"></form>

のようなHTMLは有効です。しかしこの要素にJavaScriptからアクセスするとき、

document.a-b;

とは記述できないため、

document.forms[ 'a-b' ];

とする必要があります。

利用例

左のテキストボックスへの入力を参照して、右のテキストボックスへコピーします。

→ 
<form name="form1">
    <input type="text" name="text1" onkeyup="TextChanged()" />
    <input type="text" name="text2" />
</form>

<script type="text/javascript">
  function TextChanged()
  {
      var elements = document.forms.form1.elements;
      elements.text2.value = elements.text1.value;
  }
</script>

参考

JavaScriptのドキュメントから検索