実験「エレメントの列挙」

<< 戻る   トップ >>

目的

JavaScript の DOM メソッド getElementsByTagName() の使いかたに習熟するともにブラウザ間での差異がないか検証する。

<script type="text/javascript">
function enumElem( src, tag ) {
  var elems = src.getElementsByTagName( tag );
  var msg = '要素数: ' + elems.length + ':  ';
  for ( e in elems ) {
    msg += e;
    msg += ' / ';
  }
  alert( msg );
}
</script>
<ul onclick="enumElem(this,'li')">
  <li id="LI1">リストアイテム1</li>
  <li id="LI2">リストアイテム2</li>
  <li id="LI3">リストアイテム3</li>
  <li id="LI4">リストアイテム4</li>
</ul>

結果

browser要素数要素
Firefox 1.0740/1/2/3/length/item/namedItem
Mozilla 1.7.124
Opera 8.5140/1/2/3/length/L1/L2/L3/L4/item/namedItem/tags
Konqueror 3.5.04namedItem/Item
IE 6.x4length/L1/L2/L3/L4

考察

主要ブラウザ 4種ではすべて正しい要素数 4 を計上した。したがって、どのブラウザでもきちんと機能している。

予想外の結果であったのはオブジェクトプロパティの列挙である。予想外、とは筆者の無知が露呈しただけのことである。これまで、走査したエレメントを処理するのに for in ループを使用していたのだが、これが誤りである。 以下のように、for ループを使用する必要がある。

function enumElem( src, tag ) {
  var elems = src.getElementsByTagName( tag );
  var msg = '要素数: ' + elems.length + ':  ';
  for ( e = 0; e < elems.length; ++ e ) {
    msg += elems.item( e ).id;
    msg += ' / ';
  }
  alert( msg );
}

余談だが、for in ループで抽出されるプロパティに、これほどブラウザ間での差異があることは新鮮な驚きである。

いうまでもなく IE 6.x は参考出品、みそっかすです。それにしてももっとも危なそう。


作成: 2006-01-13 13:18:14.0更新: 2006-07-29 17:09:38.0
http://museo-anonimo.jp/nanban/?id=109,http://museo-anonimo.jp/nanban/tr/109