<< 2006/09/ 1 2 3 1. 葬儀tips
2. emacs で 3タブ
4 1. viewset という考え方
5 6 7 1. Emacs22 の font-lock の色使いが terminal で再現できなくて意味不明
8 1. (たぶん)いちばん短い phpdoc 生成の覚え書き
9 1. iCab 3.0.2 の getElementsByTagName は自分自身を含むらしい
10 1. screen の multiuser mode を1台のマシン上で1人で実験する
11 12 13 14 1. Wiki でゲームブックって作れるな
15 1. xCHM 1.9 ANSI 版がいい感じ
16 1. また Maxtor 逝った
17 18 19 20 21 22 1. るびま16号のインタビューが面白い
23 24 25 26 1. Terminal のフォント放浪 → Monaco + ヒラギノに落ち着く
27 28 1. 画面の広さを取り戻せ
29 1. Finder から一発で Terminal 上の Emacs を起動する
30 >>
トップ «前の日記(2006-09-08) 最新 次の日記(2006-09-10)» 編集

2006-09-09 [長年日記]

_ iCab 3.0.2 の getElementsByTagName は自分自身を含むらしい

JavaScript で DOM いじりの話。いやーハマった。

  1. 要素をオブジェクト化する
  2. そのオブジェクトに対して getElementsByTagName() で含まれる要素のコレクションを取得する

iCab 3.0.2 では 1 と 2 が同じ要素名(例えば div)だった場合、2 で取得したコレクションに 1 で取得したオブジェクト自身が含まれてしまう。日本語だと意味が分からないかもしれないのでコードを用意した。

  • div#large とその中に div#small を用意
  • div#large のオブジェクトを取得
  • そのオブジェクトに対して getElementsByTagName() で(自分としては)その「中に含まれる要素のコレクション」を取得
  • div#large の中には div#small しかないので、コレクションの length は 1 になるし、最初の要素の ID は small になるはず。
    • ここで iCab 3.0.2 ではコレクションの数が 2 に、最初の要素の ID が large(つまり自分自身)になってしまう。

Firefox 1.5.0.6 と iCab 3.0.2 で確認。

※ 他のブラウザの状況が確認できた方はツッコミにでもいただけると助かります。

しかし iCab って、2 のときに比べてずいぶんまともに動くようになってるんだねぇ。

<html>
  <head>
    <title>Test of DOM</title>
    <script>
function main() {
  var log = [];
  var first = document.getElementsByTagName( 'div' );
  log.push( 'a number of whole divs : ' + first.length );
  log.push( 'id of 1st element of divs : ' + first[0].id );
  var second = first[0].getElementsByTagName( 'div' );
  log.push( '----' );
  log.push( 'a number of divs inside divs : ' + second.length );
  log.push( 'id of 1st elements of divs : ' + second[0].id );

  var console = document.getElementById( 'log' );
  console.innerHTML = '<pre>' + log.join( "\n" ) + '</pre>';
}

window.onload = main;
    </script>
    <style>
body {
  background: #fefefe;
  color:      #202020;
}
div {
  border:  1px solid;
  margin:  1em;
  padding: 0;
}
#large {
  height: 5em;
}
#small {
  height: 1.4em;
}
#large:before {
  content: 'Large';
}
#small:before {
  content: 'Small';
}
#log:before {
  content: 'Log';
}
    </style>
  </head>
  <body>
    <h1>Test of DOM</h1>

    <div id="large">
      <div id="small">
      </div>
    </div>

    <div id="log">
    </div>

  </body>
</html>