document.getElementById() alternatives

Benchmark created by oliver_h on

Description

Difference from document-getelementbyid is the use of innerHTML

It also tests the ID direct acces. Reminder: This way is not W3C compliant. But, the code is clearer and works fine with IE6, and even with Firefox 4. However, it fails with Firefox 4 on this page :-(

Preparation HTML

<p id="foo">This is an element with <code>id="foo"</code>.</p>


<script>
  function gEBI(id) {
   return document.getElementById(id);
  };
  
  var $nodes = {}; //used by $memo
  
  function $memo(id) {
   return $nodes[id] ? $nodes[id] : $nodes[id] = document.getElementById(id);
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
ID direct acces
foo.innerHTML = "change content";
ready
document.getElementById()
document.getElementById('foo').innerHTML = "change content";
ready
gEBI()
gEBI('foo').innerHTML = "change content";
ready
Memoized $memo()
$memo('foo').innerHTML = "change content";
ready
document.querySelector()
document.querySelector('#foo').innerHTML = "change content";
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.