2007年05月12日
getElementsByTagName
既にいない人のコードを修正するはめになり、今日そのコードを読んでいて、奇妙なことに気づきました。
function sample1() {
var childs = $('parent').getElementsByTagName('input');
var s = "";
for (var k in childs) {
s += k+ ' => ' + childs[k].value + '<br/>';
}
$('result1').innerHTML = s;
}
この様なコード（あくまでもサンプルです）だったのですが、IEでは期待通りの動きをするのに、それ以外のブラウザでは、おかしなことになります。
ちなみに期待通りの動きとは、上の例ですとresult1のdivに下記のように表示される事です。これが期待通りというのは、あくまでも私の予想です。というのもIEではちゃんと動くが、それ以外ではまるで動かないコードの原因だったからです。
child1 => value1
child2 => value2
child3 => value3
child4 => value4
child5 => value5
それでFirefoxでの出力を確認してみたわけです。
0 => value1
1 => value2
2 => value3
3 => value4
4 => value5
なんだか、読めてきました。
MDS DOM:element.getElementsByTagNameを見てみると、
Returns a list of elements with the given tag name.
とある。標準規格であるところのECMAScriptの定義を見てみると、
getElementsByTagName(tagname)
このメソッドは NodeList を返す。tagname パラメータは DOMString 型である。
NodeListを見ると
Object NodeList
NodeList オブジェクトは以下のプロパティをもつ。
length
このプロパティは int 型である。
NodeList オブジェクトは以下のメソッドをもつ。
item(index)
どうやら、Mozillaのがちゃんとしているらしい。
そこで、MSのドキュメントを探してみると、なんだか同じ様な記述が。ということはと、
function sample2() {
var childs = $('parent').getElementsByTagName('input');
var s = "";
for (i=0; i<childs.length; i++) {
var k = childs[i].id;
s += k + ' => ' + childs[i].value + '<br/>';
}
$('result2').innerHTML = s;
}
こんな風に直して実行してみると、IE、Firefox共に同じ動きをしました。ちなみにMacのSafariでも問題ありませんでした。
