lengthが読めない理由が分からない

質問

lengthが読めない理由が分からない

var divs = document.getElementsByTagName("div");
alert(divs);
for(var i=0; i < divs.childNodes.length; ++i){
　　if(divs.childNodes[i].tagName == "h2"){
　　　　a.push = divs[i];
　　　　b.push = divs[i].h2.nodeValue;
　　　　divs[i].style.display = "none";
　　}
}

JavaScriptです。
こんなコードを実行すると、forのとこのchildNodes.lengthが読めないとエラーになります。

divsの中身はあるはずだから、読めるんじゃないかと思うのですが。
ちゃんと[object NodeList]と表示されます。

htmlの方には、divは５つぐらいかいてあります。

JavaScriptの挙動がよく分からない……。
chromeでやってますが、firefoxでも動きませんでした。

理由を教えていただけるとうれしいです。
なんか他につっこみたいこともあれば……。
h2をあんな読み方できない、とか。

回答No.3

yambejp · ベストアンサー

＞divs.childNodes

divs[0]～divs[n]がchildeNodesをもっているだけで、
divsはオブジェクトを集合したがただの配列なのでchildNodesを
もっていませんね

フロー的にはh2を含むdivを隠す？
であればh2を拾った方がはやくないですか？

<script>
function hide(){
var h2s = document.getElementsByTagName("h2");
for(var i=0; i < h2s.length; i++){
var n=h2s[i];
var a=new Array();
var b=new Array();
while(n=n.parentNode){
if(n.nodeName=="DIV"){
a.push(n);
b.push(h2s[i].firstChild.nodeValue);
n.style.display = "none";
break;
}
}
}
alert(a[0]);
alert(b[0]);
}
</script>

<div><h2>test1</h2></div>
<div>hogehoge</div>
<div><h2>test2</h2></div>
<div><hr><h2>test3</h2></hr></div>
<input type="button" value="hide" onclick="hide()">

お礼

h2からたどれば早かった……orz
思いつきませんでした。

なるほど、です。

ありがとうございました。

回答No.6

steel_gray

lengthの件は他の方の回答どおりで。
これがHTML文章で、tagNameを「比較」するなら大文字じゃないとダメかも。
～.tagName == 'h2'
↓
～.tagName == 'H2'

XMLなら大文字小文字を区別してそのまま格納されるけどHTMLだと常に大文字で格納されてます。
http://www.doraneko.org/misc/dom10/19981001/level-one-core.html#attribute-tagName

お礼

そうなんですか。
大文字で書くように気をつけます。

ありがとうございます。

回答No.5

babu_baboo

++i, i++
まじすかっ！？

回答No.4

yyr446

divsは配列（コレクションノード）だから、
divs[n].childNodes.length
のように個別指定するか、each構文(普通のjavascriptにはない)
にしなければ、．．．．
それと何故i++じゃなく++iなのか、[0]の要素は絶対無視できるんですか？

お礼

divsは配列なのにそのままchildNodes使えるはずがなかったんですね。
わかりやすい指摘です。

forの中で使う分には、i++も++iも同じ動きだと認識しているのですが、間違ってますか？
別に++iでも[0]要素は無視されてないと思います。
普段はC#とかを使ってますが、問題になったことはないです。
JavaScriptは分かりませんが……。

ありがとうございました。

回答No.2

babu_baboo

var a = [ ], b = [ ];
var divs = document.getElementsByTagName("div");

for( var i=0; i < divs.length; ++i) {
　for( var j=0; j< divs[i].childNodes.length; ++j) {
　　if( divs[i].childNodes[j].nodeName == "H2"){
　　　a.push( divs[i].childNodes[j] );
　　　b.push( divs[i].childNodes[j].firstChild.nodeValue );
　　　divs[i].childNodes[j].style.display = "none";
　　}
　}
}

ためしてないけど
//@cc_on
var a = [ ], b = [ ];
var divs = document.getElementsByTagName("div");

for( var c1 = 0, tgt1, h2; tgt1 = divs[ c++ ]; ) {
　h2 = tgt1.getElemensByTagName( 'h2' );
　for( var c2 = 0, tgt2; tgt2 = h2[ c2++ ]; ) {
　　a.push( tgt2 );
　　b.push( tgt2./*@if(1) innerText @else@*/ textContent /*@end@*/ );//ちょっとちがう
　　tgt2.style.display = 'none';
　}
}

お礼

なるほど、やり方が分かりました。
ありがとうございます。

回答No.1

noname#108428

単純に

divs.length

で取得できませんか？

お礼

なるほど。
エラーはでなくなりました。
となると、forは2ついるんだ……。

ありがとうございます。