Atelierで“getElementById”タグの付いているブログ記事

2008年3月31日

隠居の JavaScript :番号付きリストを降順にする。(追記)

 W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。
<!--list descend-->
<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID(この場合:"hoge")のエレメント(この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード(この場合、<li>..</li>)の数を変数 max に与える。参考:AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強:for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script> 


 なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
 今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace (空白スペース)をカウントの対象に入れるらしいことが分かった。
 そこで、Customaize History 履歴ページ(MovableType のインデックス・テンプレートで作成している)の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。

 この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。