このコードを簡単に説明してください。なぜあまりが0になると、JSが動作するのかがわかりません。（child childrenのあたりも自分の頭がごちゃごちゃしています）よろしくお願いします。 Hello DOM ! 1 2 3 4 5 6 7 8 9 10 var children = document.querySelector("#wrap .list").children; for(var i=0;i

javascriptに関する質問です。

解決済

質問者：kanako20123
質問日時：2012/08/29 22:20
回答数：4件

このコードを簡単に説明してください。
なぜあまりが0になると、JSが動作するのかがわかりません。
（child childrenのあたりも自分の頭がごちゃごちゃしています）
よろしくお願いします。

<html>
<head>
<title>Hello DOM !</title>
</head>
<body>
<div id="wrap">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script type="text/javascript">
var children = document.querySelector("#wrap .list").children;
for(var i=0;i<children.length;i++){
var child = children[i];
if(i%2){
child.style.backgroundColor = "#EEEEEE";
}
}
</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4ベストアンサー

回答者： babu_baboo
回答日時：2012/08/31 13:43

> document.querySelector("#wrap .list").

> ここまでは理解できるのですが、

querySelector は、１つのHTML要素を返す。
querySelectorAll は、複数のHTML要素をノードリストととして返す。（JSの配列と似ているがそうではない）
querySelector で返されたノード(ul要素)には、子ノード（今回はli要素）が１０個存在する。
querySelector で得られた要素に .childNodes (.children) を付加することで、その”子ノードリスト”を得られる。
その得られた子ノード群にまとめて背景色を設定できる命令はない(*1)ので、1個づつ　変数 child に代入して色をつける。

*1:ブラウザが対応していれば、スタイルシートにルールを設定すればできる

この回答への補足

ありがとうございます。質問引っ張りすぎで申し訳ないのですが、

＞＞childNodes (.children) を付加することで・・・・・

ここを聞こうかと思ったのですが、書いているうちなんとなくわかりました。

補足日時：2012/09/23 08:44

通報する

- 0
- 件

通報する

この回答へのお礼

皆さんありがとうございました。評価の方が遅くなってしまい申し訳ありませんでした。また是非教えてください。

通報する

お礼日時：2012/09/23 08:46

No.3

回答者： babu_baboo
回答日時：2012/08/30 11:10

if (評価) { ;}

評価は、０のときは false それ以外の数値は、true と判断される

--

querySelector が使えるなら、querySelectorAll も使えるはず。
その提示されたサンプルでは、<ul>要素の子要素を全部選び、奇数のものに背景色を付けている

なので、<li>要素の前後にテキストノードがあると判断するブラウザが有れば、正常に動かないかも？

なので、以下のようにする。（<li>要素の奇数番目を収集）
ループの中に無駄な条件分岐の命令など不用になる

var children = document.querySelectorAll("#wrap .list li:nth-of-type(even)");
for(var child, i = 0; child = children[i++];) {
　child.style.backgroundColor = "#EEEEEE";
}

もしくは、
Array.prototype.forEach.call (
　document.querySelectorAll("#wrap .list li:nth-of-type(even)"), function (e) {
　　e.style.backgroundColor = "#EEEEEE"; });

というか、スクリプトを使うまでもなくスタイルシートで…

この回答への補足

みなさんありがとうございます。

document.querySelector("#wrap .list").

ここまでは理解できるのですが、

この後、childrenとしてvar childとするのはなぜですか。

変数の宣言の仕方とか、なぜ宣言するのかとか、基本的なところがよくわかりません。

初心者です!すみません。よろしくお願いします。

補足日時：2012/08/30 13:01

通報する

- 0
- 件

通報する

No.2

回答者： luka3
回答日時：2012/08/30 08:31

簡単にいうと、１行おきに行の色を変える、ということですね。

i%2 で i を 2 で割った余りを求めていますが、２で割った余りは０か１しかなく、i が１ずつ増加するので０と１が交互に発生することになります。

このあまりが１の時だけ（iが奇数の時）
child.style.backgroundColor = "#EEEEEE";
が実行される（＝動作する？）ということです。