childNode traversal vs. getElementsByTagName

Benchmark created on

Preparation HTML

<div id="container"></div>

Setup

var i = 0;
    var el;
    var container = document.getElementById('container');
    while (i < 1000) {
      el = document.createElement('p');
      el.innerHTML = 'Hello, ' + i;
      container.appendChild(el);
      i++;
    }

Teardown


    document.getElementById('container').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
childNode traversal
var container = document.getElementById('container');
var childNodes = Array.prototype.slice.call(container.childNodes);
var found = 0;
childNodes.forEach(function(node) {
  if (node.nodeName !== 'P') {
    return;
  }
  found++;
});
ready
getElementsByTagName
var container = document.getElementById('container');
var childNodes = Array.prototype.slice.call(container.getElementsByTagName('p'));
var found = 0;
childNodes.forEach(function(node) {
  if (node.nodeName !== 'P') {
    return;
  }
  found++;
});
ready

Revisions

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