JSFiddle - React, Tailwind, and code Playground

by PeeHaa

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

<h1>Vanilla JS vs jQuery <span>- Basic selectors</span>

<h3>jQuery</h3>
<pre><code>$('#example').text('test');</code></pre>

<h3>Rendered HTML</h3>
<div id="example1"></div>
<div class="example1"></div>
<div class="example1"></div>
    
<h3>Results</h3>
<p><a href="http://jsperf.com/vanilla-js-vs-jquery-basic-selectors" target="_blank">jQuery is 98% slower</a></p>
    
<h3>jQuery</h3>
<pre><code>$('.example').text('test');</code></pre>

<h3>Rendered HTML</h3>
<div id="example2"></div>
<div class="example2"></div>
<div class="example2"></div>
    
<h3>Results</h3>
<p><a href="http://jsperf.com/vanilla-js-vs-jquery-basic-selectors" target="_blank">jQuery is 98% slower</a></p>
    
<h3>jQuery</h3>
<pre><code>$('#example, .example').text('test');</code></pre>

<h3>Rendered HTML</h3>
<div id="example3"></div>
<div class="example3"></div>
<div class="example3"></div>
    
<h3>Results</h3>
<p><a href="http://jsperf.com/vanilla-js-vs-jquery-basic-selectors" target="_blank">jQuery is 98% slower</a></p>

CSS

body { font-family: 'Droid Sans', sans-serif; padding: 5px; }

h1 { font-size: 1.4em; font-weight: bold; }
h1 span { font-weight: normal; }
h2 { font-size: 1.2em; font-weight: bold; }
h3 { font-size: 1.2em; text-decoration: underline; }

code { background: #eeeeee; border-radius: 5px; padding: 2px 5px; }
pre { margin: 10px 0; }

div { display: inline-block; width: 100px; height: 100px; margin: 5px; background: green; vertical-align: top; }

JavaScript

// selector by id
(function() {
    document.getElementById('example1').innerText = 'test';
})();

// selector by class
(function() {
    var elements = document.getElementsByClassName('example2');
    for(i = 0, numbItems = elements; i < numbItems; i++) {
        elements[i].innerText = 'test';
    }
})();

// selector by both id and class
(function() {
    var elements = [];
    var exampleClasses = document.getElementsByClassName('example3');
    var exampleId = document.getElementById('example3');    
    
    for(i = 0, numbItems= exampleClasses.length; i < numbItems; i++) {
        elements.push(exampleClasses[i]);
    }
    
    elements.push(exampleId);
    
    for(i = 0, numbItems= elements.length; i < numbItems; i++) {
        elements[i].innerText = 'test';
    }
})();