getElementByIdを使うとforループが機能不全になる。

質問

Javascript初心者です。至らないところも多々あるかと存じますがよろしくお願いします。ブラウザはIE7を使用しています。

当初以下のようなコードを動作させようとしたところ、
for(h = 1;h < 3;h++){
※1
var mzu= "menu" + h;
var kami = document.getElementById(mzu).childNodes;
for(var x =0;x<5;x++){
var jiu = "suichi" + h;
var sai = document.getElementById(jiu).offsetHeight;
※2
☆kami[x].style.top = (sai*(x+1));☆
}
}
※☆は後の説明用に付加しているだけで実際のコードにはありません

IDが"menu1"の要素については期待したような結果が得られたのですが、IDが"menu2"の要素について期待したような結果が得られなかったため、alert()を用いて原因を探ることにしました。具体的には※1の部分にalert(h);を、※2の部分にalert(kami[x].style.position);を入れてみて、動作確認をしてみました。

私が期待しているようなメッセージの出る順番というのは
「1」が表示される→4回"kami[x].style.position"の中身が表示される(ちなみにabsolute)（★）→「2」が表示される→再び4回"kami[x].style.position"の中身が表示される
というものですが、実際には★の部分までしか期待されたメッセージが表示されなかったため、forループ(一つ目の)が一回のみで終了してしまったのだと判断しました。
そこでひとつひとつの行を削除したり再び加えたりしながらforループ
を一回目で止めてしまっている原因を探ってみたところ、
※2(kami[x].style.position);の行と☆～☆の行を削除した場合は
メッセージが1→2と表示される、すなわちひとつめのforループがしっかりと機能していることから、おそらく原因は※2の行や☆～☆の行で
DOM要素にアクセスしていることだと思うのですが、どうも原因がわかりません。
もちろん元のコードでもエラーは出ていません。

詳しい方、どうぞお力添えいただけないでしょうか。

回答No.2

zxcv0000 · ベストアンサー

# 多分 No.1 さんと同じ事でしょうが...

childNodes で得られる要素には、ゴミかと疑いたくなる様なものが混ざります。 例えば表示文字を格納する為の「タグでは無い要素」とか。 これに対処できるコードに変えませんか？

# それだけが原因では無いかも知れませんが、そういうコーディングの習慣を付ける方が良いですよ。

具体的には、以下を直してみてください。

1 配列要素数には 5 とか の定数で無く kami.length を使う。

2 kami[x] のうち、 kami[x].tagName が偽の要素は読み飛ばす。

他の言語等でポインタの扱いに慣れてる人は、添字を使わずに firstChild と nextSibling でループを制御する方が良いかも知れません。 読み飛しは必要ですが。

お礼

どうも回答ありがとうございます。
自己解決いたしました。

回答No.3

babu_baboo

var kami = document.getElementById(mzu).childNodes;
を、
var cnt = 0, kami = [], ns = document.getElementById(mzu).childNodes, n;
while (n = ns[cnt++]) if (1 === n.nodeType) kami.push(n);
とかなら？

お礼

どうも回答ありがとうございます。
自己解決いたしました。

回答No.1

babu_baboo

.childNodes[?]が、かならずしもえれめんとようそではないかもしれない
alert(kami[x].nodeType)
としてみてみてみては？

お礼

どうも回答ありがとうございます。
自己解決いたしました。