VanillaJS - loop through elements of class

JavaScript performance comparison

Test case created by stefansl

Preparation code

<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>
    

Preparation code output

<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

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
getElements / [].forEach.call
var elements = document.getElementsByClassName('testClass');

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

elements.forEach((element) => {
    element.textContent = 'Tested';
});
pending…
querySelectorAll / for var of
var elements = document.querySelectorAll('.testClass');
for (var element of elements) {
  element.textContent = 'Tested';
}
pending…
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)
pending…

Compare results of other browsers

Revisions

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

0 Comments