プロが教えるわが家の防犯対策術!

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は5つぐらいかいてあります。

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

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

A 回答 (6件)

>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()">
    • good
    • 0
この回答へのお礼

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

なるほど、です。

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

お礼日時:2010/03/26 23:48

lengthの件は他の方の回答どおりで。


これがHTML文章で、tagNameを「比較」するなら大文字じゃないとダメかも。
~.tagName == 'h2'

~.tagName == 'H2'

XMLなら大文字小文字を区別してそのまま格納されるけどHTMLだと常に大文字で格納されてます。
http://www.doraneko.org/misc/dom10/19981001/leve …
    • good
    • 0
この回答へのお礼

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

ありがとうございます。

お礼日時:2010/03/26 23:15

++i, i++


まじすかっ!?
    • good
    • 0

divsは配列(コレクションノード)だから、


divs[n].childNodes.length
のように個別指定するか、each構文(普通のjavascriptにはない)
にしなければ、....
それと何故i++じゃなく++iなのか、[0]の要素は絶対無視できるんですか?
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2010/03/26 23:32

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';
 }
}
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/03/26 23:23

単純に



divs.length

で取得できませんか?
    • good
    • 0
この回答へのお礼

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

ありがとうございます。

お礼日時:2010/03/26 22:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!