VanillaJS - loop through elements of class

Benchmark created by stefansl on

Preparation HTML

<ul id="testContainer">
    <!-- Total 20 entries -->
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
    <li class="testClass">Test Data</li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
getElements / [].forEach.call
var elements = document.getElementsByClassName('testClass');

[].forEach.call(elements, function (element) {
    element.textContent = 'Tested';
});
ready
querySelectorAll / [...document.querySelectorAll()].map
[...document.querySelectorAll('.testClass')].map(
    (element) => {
        return element.textContent = 'Tested';
    }
);
ready
getElements / for-loop / length cached
var elements = document.getElementsByClassName('testClass'),
    elLength = elements.length;
for (var i = 0; i < elLength; i++) {
    elements.item(i).textContent = 'Tested';
};
ready
getElements / for-loop
var elements = document.getElementsByClassName('testClass');
for (var i = 0; i < elements.length; i++) {
    elements.item(i).textContent = 'Tested';
};
ready
getElements / Array.from(elements).map
var elements = document.getElementsByClassName('testClass');
Array.from(elements).map(
    (element) => {
        return element.textContent = 'Tested';
    }
);
ready
querySelectorAll / foreach
var elements = document.querySelectorAll('.testClass');

elements.forEach((element) => {
    element.textContent = 'Tested';
});
ready
querySelectorAll / for var of
var elements = document.querySelectorAll('.testClass');
for (var element of elements) {
  element.textContent = 'Tested';
}
ready
getElementById / recursion through nodelist
const firstChildNode = document.getElementById('testContainer').children[0]

const walk = node => {
  node.textContent = 'Tested';
  if (node.nextElementSibling) {
    walk(node.nextElementSibling)
  }
}

walk(firstChildNode)
ready

Revisions

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

  • Revision 1: published by stefansl on