Personal tools
You are here: Home ブログ matsuyama Ajax 最適化 Tips - getElementById する前に
Document Actions

Ajax 最適化 Tips - getElementById する前に

getElementById で要素を手っ取り早く取得するのはとても良いイディオムですが(コードが短かくなる)、パフォーマンスのことを心配する場合は以下のことを念頭に入れておくと良いかもしれません。

Microsoft の DHTML Collections(*) によると、

(*) http://msdn2.microsoft.com/en-us/library/ms533048.aspx

document 以下の特定の種類の要素をフラットにアクセスできるコレクションという形で提供しています。通常ノードツリーをトラバースするよりコレクションにアクセスするほうが速いので、これを使わない手はありません。特に便利だと思われるのは以下のようなものでしょうか(他にも便利なものがありますが、今回は document に対してのコレクションのみに限定したいので省きました)。

  • document.anchors
  • document.forms

仮に以下のような HTML があるとします。

<a id="button1">Click me!</a>
<form id="form1">
...
</form>

この場合、

document.getElementById('button1').innerHTML = 'Do not click me!';
document.getElementById('form1').onsubmit = function() { alert('Submit!') };

と書くより、

document.anchors['button1'].innerHTML = 'Do not click me!';
document.forms['form1'].onsubmit = function() { alert('Sumit!') };

と書くほうが格段に速いです。ただコレクションのインデックスは整数値あるいは id/name を受けつける寛大な仕様になっているので、もう少し厳密にするなら以下のように書くと良いかもしれません。

function getElementByIdWithHint(id, expectedTagName) {
  expectedTagName = (expectedTagName || '').toLowerCase();

  var collection;
  if (expectedTagName == 'a')
    collection = document.anchors;
  else if (expectedTagName == 'form')
    collection = document.forms;

  if (collection) {
    for (var i = 0, len = collection.length; i < len; i++) {
      var elem = collection[i];
      if (elem.id == id)
        return elem;
    }
    return null;
  } else
    return document.getElementById(id);
}

getElementByIdWithHint('button1', 'a').innerHTML = 'Do not click me!';
getElementByIdWithHint('form1', 'form').onsubmit = function() { alert('Sumit!') };

言うまでもありませんが、 getElementById を使わないにこしたことはありません。ほとんどの場合はうまくキャッシュさせたり、もっとオーダーの低い firstChild なりを使って何とかなったりします。その辺りのこともいずれ話したいと思います。

The URL to Trackback this entry is:
http://dev.ariel-networks.com/Members/matsuyama/before-getElementById/tbping
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
(Required)
(Required)
This helps us prevent automated spamming.
Captcha Image


Copyright(C) 2001 - 2006 Ariel Networks, Inc. All rights reserved.