jQuery $('#id') vs native getElementById (v5)

Revision 5 of this benchmark created by Skary on August 7, 2014

Preparation HTML

<!--[if IE 6]>
    <link rel="stylesheet" media="screen" href="Assets/Styles/IE6.css" />
    <div id="ie-container"></div>
    <div id="ie-message">
        This site does not support IE6. <a href="IE6.html">Click here</a> to find out why and update your browser.
    </div>
<![endif]-->    <div id="bg"> 
                <div id="language"> 
        <dl> 
                <dt>Select a language</dt> 
                <dd><a href="#" title="English">English</a></dd> 
                <dd><a href="#" title="French">French</a></dd> 
                <dd><a href="#" title="Spanish">Spanish</a></dd> 
                <dd><a href="#" title="Arabic">Arabic</a></dd> 
        </dl> 
</div> 
<header> 
        <div> 
                <p id="logo" title="xxxx xxxx xxxx">xxxx xxxx xxxx</p> 
                <nav> 
                        <ul> 
                                <li><a href="./">xxxx</a></li> 
                                <li><a href="xxxx.php">xxxx</a></li> 
                                <li id="dd"><a href="xxxx.php">xxxx<span></span></a> 
                                        <ul> 
                                                <li><a href="#"><span></span>xxxx xxxx</a></li> 
                                                <li class="odd"><a href="#"><span></span>xxxx xxxx xxxx</a></li> 
                                                <li><a href="#"><span></span>xxxx</a></li> 
                                                <li class="odd"><a href="#"><span></span>xxxx xxxx</a></li> 
                                                <li><a href="#"><span></span>xxxx xxxx</a></li> 
                                        </ul> 
                                </li> 
                                <li><a href="xxxx.php">xxxx xxxx</a></li> 
                                <li><a href="xxxx.php">xxxx xxxx</a></li> 
                                <li><a href="xxxx.php">xxxx</a></li> 
                        </ul> 
                </nav> 
        </div> 
</header>               <section id="container"> 
                        <div id="carousel"> 
                                <ul> 
                                        <li><img src="Assets/Images/1.jpg"></li> 
                                        <li><img src="Assets/Images/2.jpg"></li> 
                                        <li><img src="Assets/Images/3.jpg"></li> 
                                </ul> 
                        </div> 
           </section> 
           <footer> 
        <div id="footer"> 
                <aside> 
                        <h3>xxxx xxxx</h3> 
                        <p>xxxx xxxx xxxx xxxx xxxx xxxxxxxx xxxx xxxx xxxx xxxx xxxxxxxx xxxx xxxx xxxx xxxx xxxxxxxx xxxx xxxx xxxx xxxx xxxx</p> 
                </aside> 
                <ul id="links"> 
                        <li><a href="#"><span></span>xxxx xxxx</a></li> 
                        <li><a href="#"><span></span>xxxx xxxx xxxx</a></li> 
                        <li><a href="#"><span></span>xxxx</a></li> 
                        <li><a href="#"><span></span>xxxx xxxx</a></li> 
                        <li><a href="#"><span></span>xxxx xxxx</a></li> 
                </ul> 
                <div> 
                        <h3>Contact</h3> 
                        <p>For more information on our services, simply drop us a message via the website.</p> 
                        <a href="#">click here <span>&raquo;</span></a> 
                </div> 
                <dl id="partners"> 
                        <dt>xxxx:</dt> 
                        <dd><span class="replace sia">xxxx</span></dd> 
                        <dd><span class="replace til">xxxx</span></dd> 
                        <dd><span class="replace hor"></span></dd> 
                        <dd><span class="replace ede">xxxx</span></dd> 
                        <dd><span class="replace asa">xxxx</span></dd> 
                </dl> 
        </div> 
</footer>   </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

window.onload = function() {
 var button = jQuery('#dd'),
     dropdown = button[0].firstChild.nextSibling.nextSibling;

 button.hover(function() {
  dropdown.style.display = 'block';
 }, function() {
  dropdown.style.display = 'none';
 });
};

window.onload = function() {
 var button = document.getElementById('dd'),
     dropdown = button.firstChild.nextSibling.nextSibling;

 jQuery(button).hover(function() {
  dropdown.style.display = 'block';
 }, function() {
  dropdown.style.display = 'none';
 });
};

jQuery(window).load(function() {
 var dropdown = jQuery('ul', '#dd');

 button.hover(function() {
  jQuery(this).hide();
 }, function() {
  jQuery(this).show();
 });
});

Revisions

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

• Revision 1: published by Mark McDonnell on March 23, 2011
• Revision 5: published by Skary on August 7, 2014