Run results for: jQuery (v3.6.0) && Dom7 (4.0.4) Full (v3)

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Dom7 removeAttr

13K/s

jQuery removeAttr

12K/s

Dom7 set attr

11K/s

jQuery set attr

10K/s

Dom7 removeClass

9K/s

Dom7 css

8K/s

jQuery removeClass

7K/s

Dom7 addClass

7K/s

Dom7 set attr (Object)

7K/s

jQuery set attr (Object)

5K/s

Dom7 toggleClass

5K/s

jQuery css

5K/s

jQuery addClass

4K/s

Dom7 css (Object)

2K/s

jQuery toggleClass

2K/s

Dom7 each

763/s

jQuery each

762/s

jQuery css (Object)

742/s

View exact numbers

Test name	Executions per second
✓ Dom7 removeAttr	12,825 Ops/sec
jQuery removeAttr	12,122 Ops/sec
Dom7 set attr	11,122 Ops/sec
jQuery set attr	9,830 Ops/sec
Dom7 removeClass	9,256 Ops/sec
Dom7 css	8,084 Ops/sec
jQuery removeClass	6,916 Ops/sec
Dom7 addClass	6,806 Ops/sec
Dom7 set attr (Object)	6,508 Ops/sec
jQuery set attr (Object)	5,281 Ops/sec
Dom7 toggleClass	5,234 Ops/sec
jQuery css	5,170 Ops/sec
jQuery addClass	4,325 Ops/sec
Dom7 css (Object)	2,172 Ops/sec
jQuery toggleClass	1,958 Ops/sec
Dom7 each	763 Ops/sec
jQuery each	762 Ops/sec
jQuery css (Object)	742 Ops/sec

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dom7@4.0.4/dom7.min.js"></script>

Script Preparation code:

function range(size, startAt = 0) {
    return [...Array(size).keys()].map((i) => i + startAt);
}

range(500).map((link) => {
    const a = document.createElement("a");
    const text = `My Title Text ${link}`;
    const linkText = document.createTextNode(text);
    a.appendChild(linkText);
    a.href = `http://example.com/${link}`;
    a.classList.add('test-link')
    document.body.appendChild(a);
});

Tests:

jQuery addClass
jQuery('a.test-link').addClass('new-test-link');
Dom7 each
Dom7('a.test-link').each(function(element, index) { console.log( element, index ); });
jQuery each
jQuery('a.test-link').each(function(index, element) { console.log( index, element ); });
Dom7 set attr
Dom7('a.test-link').attr('data-test', 'test-value');
jQuery set attr
jQuery('a.test-link').attr('data-test', 'test-value');
Dom7 css
Dom7('a.test-link').css('color', 'black');
jQuery css
jQuery('a.test-link').css('color', 'black');
Dom7 removeAttr
Dom7('a.test-link').removeAttr('title');
jQuery removeAttr
jQuery('a.test-link').removeAttr( "title" );
Dom7 set attr (Object)
Dom7('a.test-link').attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" });
jQuery set attr (Object)
jQuery('a.test-link').attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" });
Dom7 toggleClass
Dom7('a.test-link').toggleClass('new-test-link');
jQuery toggleClass
jQuery('a.test-link').toggleClass('new-test-link');
Dom7 removeClass
Dom7('a.test-link').removeClass('new-test-link');
jQuery removeClass
jQuery('a.test-link').removeClass('new-test-link');
Dom7 addClass
Dom7('a.test-link').addClass('new-test-link');
jQuery css (Object)
jQuery('a.test-link').css({ left: '100px', top: '200px', color: 'red', width: '300px', marginLeft: '17px', 'padding-right': '20px' });
Dom7 css (Object)
Dom7('a.test-link').css({ left: '100px', top: '200px', color: 'red', width: '300px', marginLeft: '17px', 'padding-right': '20px' });