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>

More

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Develop Document Jekyll