Javascript vs Jquery selectors

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header id="fsHeader">
				<div class=" fsBanner fsStyleAutoclear" id="fsEl_2585">

			<div class="fsElement fsContent branding" id="fsEl_2586">

			<div class="fsElementContent">
    	<a href="/fs/pages/83"><img src="/uploaded/themes/default/images/misklogo.png" width="481"></a>

</div>


	</div>
	<div class="fsElement fsContainer" id="fsEl_3608">

			<div class="fsElementContent">
    	
	<div class="fsElement fsNavigation fsList nav-main" id="fsEl_3610">

			<div class="fsElementContent">
    <nav>
        <ul class="fsNavLevel1">
            	<li class="fsNavParentPage">
		<a href="/about-us">About Us</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/about-us/welcome-message">Welcome Message</a>
	</li>
	<li>
		<a href="/about-us/mission-vision-core-values">Mission, Vision &amp; Core Values</a>
	</li>
	<li>
		<a href="/about-us/who-we-are">Who we are</a>
	</li>
	<li>
		<a href="/about-us/governance">Governance</a>
	</li>
	<li>
		<a href="/about-us/facilities">Facilities</a>
	</li>
	<li>
		<a href="/about-us/staff">Staff</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/learning-academics">Learning &amp; Academics</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/learning-academics/curriculum">Curriculum</a>
	</li>
	<li>
		<a href="/learning-academics/primary-school">Primary School (Grades PreK-5)</a>
	</li>
	<li>
		<a href="/learning-academics/secondary-school">Secondary School (Grades 6-12)</a>
	</li>
	<li>
		<a href="/learning-academics/technology-innovation">Technology &amp; Innovation</a>
	</li>
	<li>
		<a href="/learning-academics/student-support-services">Student Support Services</a>
	</li>
	<li>
		<a href="/learning-academics/library">Library</a>
	</li>
	<li>
		<a href="/learning-academics/extended-learning-activities">Extended Learning Activities</a>
	</li>
	<li>
		<a href="/learning-academics/service-learning">Service Learning</a>
	</li>
	<li>
		<a href="/learning-academics/school-calendar">School Calendar</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/admissions">Admissions</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/admissions/application-process">Application Process</a>
	</li>
	<li>
		<a href="/admissions/apply-now">Apply Now!</a>
	</li>
	<li>
		<a href="/admissions/tuition-fees">Tuition &amp; Fees</a>
	</li>
	<li>
		<a href="/admissions/scholarship-program">Scholarship Program</a>
	</li>
	<li>
		<a href="/admissions/faq">FAQ</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/life-at-misk">Life at Misk</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/life-at-misk/campus">Campus</a>
	</li>
	<li>
		<a href="/life-at-misk/services">Services</a>
	</li>
	<li>
		<a href="/life-at-misk/life-in-ksa">Life in KSA</a>
	</li>
	<li>
		<a href="/learning-academics/school-calendar">School Calendar</a>
	</li>
	<li>
		<a href="/life-at-misk/school-events">School Events</a>
	</li>
	<li>
		<a href="/life-at-misk/school-news">School News</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/media-gallery">Media Gallery</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/media-gallery/photo-gallery">Photo Gallery</a>
	</li>
	<li>
		<a href="/media-gallery/video-gallery">Video Gallery</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/careers">Careers</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/careers/open-positions">Open Positions</a>
	</li>
	<li>
		<a href="/careers/application-process">Application Process</a>
	</li>
	<li>
		<a href="/life-at-misk/life-in-ksa">Life in Saudi Arabia</a>
	</li>

					</ul>
			</div>
	</li>
	<li>
		<a href="/contact-us">Contact Us</a>
	</li>

        </ul>
</nav>

</div>


	</div>



</div>


	</div>



</div>


			</header>

Test runner

Ready to run.

Testing in
TestOps/sec
JQuery ID Find Class
var mainNav = $("#fsHeader").find(".nav-main");
ready
JQuery ID and class
var mainNav = $("#fsHeader .nav-main");
ready
Javascript Class
var mainNav = document.getElementsByClassName("nav-main");
ready
Javascript Class (JQuery Object)
var mainNav = document.getElementsByClassName("nav-main"),
    $mainNav = $(mainNav);
ready
Javascript ID and Class
var parent = document.getElementById("fsHeader"),
    mainNav = parent.getElementsByClassName("nav-main");
ready
Javascript ID and Class (JQuery Object)
var parent = document.getElementById("fsHeader"),
    mainNav = parent.getElementsByClassName("nav-main"),
    $mainNav = $(mainNav);
ready

Revisions

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