JavaScript で DOM いじりの話。いやーハマった。
- 要素をオブジェクト化する
- そのオブジェクトに対して 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>