Run results for: Rewrite multiple classes (setAttribute vs. className vs. classList vs setAttribute=List vs className=List)

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0

Browser: Firefox 119

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

HTML Preparation code:

<div id="foo" class="a b c"></div>

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? "1 2 3" : "4 5 6"; element.setAttribute("class", classes); }
className
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? "1 2 3" : "4 5 6"; element.className = classes; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.classList.remove(...element.classList); element.classList.add(...classes); }
setAttribte=List
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.setAttribute("class", classes.join(' ')); }
className=List
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.className = classes.join(' '); }